Angular là gì?
Bộ lọc:
Angular là một framework mã nguồn mở dựa trên TypeScript, được sử dụng để xây dựng và phát triển các ứng dụng web đơn trang (Single Page Applications - SPAs). Angular được dẫn dắt bởi nhóm Angular Team tại Google cùng với cộng đồng các cá nhân và công ty. Angular cung cấp một cách tiếp cận hiện đại và mạnh mẽ để xây dựng giao diện người dùng, với khả năng tích hợp các công nghệ như two-way data binding, modularization, templates, dependency injection, và nhiều tính năng khác giúp tạo ra các ứng dụng web hiệu quả và dễ bảo trì.
Angular là một phiên bản viết lại hoàn toàn từ AngularJS (hay còn gọi là Angular 1), với mục tiêu cung cấp một kiến trúc ứng dụng mạnh mẽ hơn, tối ưu hóa cho hiệu suất và tương thích với các tiêu chuẩn web hiện đại. Angular sử dụng kiến trúc dựa trên các components và services, giúp phát triển các ứng dụng có cấu trúc rõ ràng và có thể mở rộng.
Angular hỗ trợ các tính năng như lazy loading, giúp tải các module cần thiết một cách thông minh để tối ưu hóa thời gian tải và hiệu suất ứng dụng. Nó cũng cung cấp một bộ công cụ phát triển mạnh mẽ, bao gồm Angular CLI, để tự động hóa quá trình xây dựng và triển khai ứng dụng.
Angular được cập nhật và duy trì thường xuyên với các phiên bản mới, mỗi phiên bản đều hỗ trợ ngược với phiên bản trước đó, và có chính sách hỗ trợ dài hạn (LTS) để đảm bảo ứng dụng của bạn luôn được cập nhật và bảo mật.
Trong Angular, vòng đời của một component hay directive được quản lý thông qua một loạt các móc vòng đời (lifecycle hooks), cho phép bạn can thiệp vào các giai đoạn khác nhau trong quá trình khởi tạo, cập nhật và phá hủy của component hoặc directive. Dưới đây là một số móc vòng đời chính và mục đích của chúng:
SimpleChanges chứa các giá trị hiện tại và trước đó của thuộc
tính.ngOnChanges và
ngOnInit, và mỗi khi Angular chạy phát hiện thay đổi. Phương
thức này cho phép bạn thực hiện kiểm tra tùy chỉnh và hành động dựa trên
những thay đổi đó.ngAfterContentInit và mỗi lần nội dung bên trong component được
kiểm tra bởi Angular.ngAfterViewInit và mỗi lần view của component và các view con
được kiểm tra bởi Angular.Hiểu rõ về các móc vòng đời trong Angular giúp bạn có thể tối ưu hóa ứng dụng, quản lý tài nguyên một cách hiệu quả và thực hiện các thao tác cần thiết tại thời điểm chính xác trong vòng đời của component hoặc directive.
Trong Angular, components là các khối xây dựng chính của ứng dụng. Mỗi component bao gồm ba phần chính:
@Component, nói cho Angular biết cách xử lý class.
Metadata có thể bao gồm các thông tin như selector (để xác định cách
component được sử dụng trong HTML), đường dẫn đến template, và các styles cụ
thể cho component.Components trong Angular giúp tạo ra các ứng dụng có cấu trúc và dễ bảo trì bằng cách chia UI thành các phần nhỏ, độc lập và tái sử dụng. Các component có thể giao tiếp với nhau thông qua input và output, và có thể sử dụng các dịch vụ để chia sẻ logic không gắn liền với view. Angular Material cung cấp một bộ sưu tập các component UI dựa trên Material Design để sử dụng trong các ứng dụng Angular.
Trong Angular, directives là các lớp có khả năng thêm hành vi mới hoặc sửa đổi hành vi hiện có của các phần tử trong template của ứng dụng Angular. Directives được sử dụng để thao tác với DOM, ví dụ như thêm hoặc xóa phần tử từ DOM hoặc thay đổi ngoại hình của các phần tử DOM.
Có ba loại directives chính trong Angular:
*ngIf, *ngFor, và
*ngSwitch.ngStyle và ngClass, giúp bạn thay đổi
style và class của phần tử.@Directive và
định nghĩa hành vi mà bạn muốn thêm vào.import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[appHighlight]',
})
export class HighlightDirective {
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight('yellow');
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
Trong ví dụ trên, HighlightDirective là một attribute
directive tùy chỉnh mà khi bạn thêm vào một phần tử, nó sẽ thay đổi màu nền của
phần tử đó khi chuột di chuyển vào và ra khỏi phần tử.
Directives là một trong những khái niệm cốt lõi của Angular, giúp bạn tạo ra các ứng dụng web tương tác và động bằng cách mở rộng HTML với các hành vi và tính năng mới.
Trong Angular, templates là những bản thiết kế hoặc khuôn mẫu cho một phần của giao diện người dùng (UI). Templates được viết bằng HTML và có thể sử dụng cú pháp đặc biệt bên trong để tận dụng nhiều tính năng của Angular, như ràng buộc dữ liệu (data binding), xử lý sự kiện (event handling), và các directive.
{{ }} để
hiển thị dữ liệu từ component class ra template.[property]="expression" hoặc từ template đến class thông qua
(event)="handler()", và ràng buộc dữ liệu hai chiều (two-way
data binding) sử dụng [(ngModel)]="property".*ngIf, *ngFor, và *ngSwitch.Templates trong Angular đóng vai trò quan trọng trong việc xác định cách giao diện người dùng được hiển thị và tương tác với người dùng. Chúng giúp tạo ra các ứng dụng web động và tương tác cao.
Ưu điểm của việc sử dụng Angular bao gồm:
Angular mang lại nhiều lợi ích cho việc phát triển ứng dụng web, từ việc tăng cường năng suất cho đến việc cung cấp một hệ thống mạnh mẽ cho việc xây dựng ứng dụng phức tạp và hiệu suất cao.
Trong Angular, Service là một thành phần quan trọng được sử dụng để tổ chức và chia sẻ logic nghiệp vụ, dữ liệu, và chức năng giữa các thành phần khác nhau của ứng dụng. Service là một class với mục đích cụ thể mà không gắn liền với view nào và có thể được "tiêm" (inject) vào các component, directive, pipes, và các service khác thông qua cơ chế Dependency Injection (DI) của Angular.
@Injectable() để chỉ định
rằng class có thể được tiêm vào các thành phần khác.providers của @NgModule() hoặc sử
dụng providedIn để đăng ký service ở root hoặc một module cụ
thể.Service trong Angular giúp tạo ra các ứng dụng có cấu trúc tốt, dễ bảo trì và mở rộng, đồng thời tăng cường khả năng tái sử dụng và chia sẻ code.
Trong Angular, thuật ngữ "annotations" thường được nhầm lẫn với "decorators", nhưng chúng thực sự là hai khái niệm khác nhau. Tuy nhiên, trong ngữ cảnh của TypeScript và Angular hiện đại, chúng ta thường nói về "decorators" hơn là "annotations".
@,
như @Component, @NgModule, @Input,
@Output, @Injectable, v.v., và chúng được sử dụng
để định nghĩa và gắn các metadata cụ thể cho các phần tử của Angular như
components, services, modules, và các directive.Trong thực tế hiện đại của Angular, chúng ta thường sử dụng decorators để định nghĩa và thêm hành vi cho các thành phần của Angular. Decorators là một phần quan trọng của cú pháp Angular và TypeScript, và chúng là những gì bạn sẽ thấy và sử dụng khi làm việc với Angular ngày nay.
Trong Angular, nội suy chuỗi (string
interpolation) là một kỹ thuật một chiều để ràng buộc dữ liệu từ mã TypeScript
của component đến template HTML của nó. Nó sử dụng cú pháp biểu thức template
trong cặp ngoặc nhọn {{ }} để hiển thị dữ liệu từ component ra
view. Nội suy chuỗi cho phép bạn thêm giá trị của các thuộc tính, biến hoặc kết
quả của các biểu thức vào nội dung HTML một cách động.
Bạn có thể sử dụng nội suy chuỗi để hiển thị giá trị của biến, thực hiện các phép toán, hoặc gọi hàm trong template của bạn. Ví dụ:
<p>{{ yourVariable }}</p>
<p>{{ 1 + 1 }}</p>
<p>{{ yourFunction() }}</p>
Trong đó yourVariable là một thuộc tính trong class
của component, 1 + 1 là một biểu thức toán học, và
yourFunction() là một phương thức được định nghĩa trong class của
component.
ngModel hoặc ngBind là lựa chọn tốt hơn.Nội suy chuỗi là một phần cơ bản của Angular, giúp tạo ra các ứng dụng động và tương tác bằng cách liên kết dữ liệu giữa logic ứng dụng và giao diện người dùng một cách mạch lạc.
Trong AngularJS, $scope và scope đều đề
cập đến đối tượng scope, nhưng chúng được sử dụng trong các ngữ cảnh khác nhau
và có cách tiếp cận khác nhau về cách chúng được truyền vào một hàm hoặc phương
thức.
$scope là một đối tượng scope được sử dụng trong các
controllers và được truyền vào như một phần của dependency injection của
AngularJS.$scope được sử dụng để thiết lập mô hình dữ liệu cho một view
và là cầu nối giữa controller và view.$scope có thể chứa các thuộc tính và phương thức, và thay đổi
trên $scope sẽ được phản ánh trong view thông qua two-way data
binding.$scope như một
đối số vào hàm controller.scope thường được sử dụng trong các link functions của
directives và không được truyền vào thông qua dependency injection.scope trong link function của directive có thể là một scope mới
hoặc một scope kế thừa từ controller cha, tùy thuộc vào cách directive được
định nghĩa (với scope riêng biệt hoặc không).scope trong link function được truyền vào như một tham số thông
thường của hàm, không phụ thuộc vào tên của tham số.$scope được truyền vào
controller thông qua dependency injection, trong khi scope được
truyền trực tiếp vào link function của directive như một tham số.$scope được sử dụng trong
controllers, còn scope thường được sử dụng trong các link
functions của directives.Ví dụ, khi bạn định nghĩa một controller, bạn sẽ sử dụng
$scope:
app.controller('MyController', function ($scope) {
// Sử dụng $scope ở đây
});
Khi bạn định nghĩa một link function trong directive, bạn sẽ sử
dụng scope:
app.directive('myDirective', function () {
return {
link: function (scope, element, attrs) {
// Sử dụng scope ở đây
},
};
});
Lưu ý rằng trong Angular (phiên bản 2 trở lên), khái niệm về
$scope đã được loại bỏ và thay thế bằng một cách tiếp cận dựa trên
component, nơi mà dữ liệu và hành vi được đóng gói trong các lớp TypeScript của
component
Trong Angular, Eager Loading và Lazy Loading là hai kỹ thuật được sử dụng để tải các module trong ứng dụng. Dưới đây là sự khác biệt giữa chúng:
loadChildren và không được import trực tiếp
trong AppModule.preloadingStrategy
trong RouterModule và sử dụng loadChildren để định nghĩa các
module cần được tải trước.Sử dụng Eager, Lazy, hoặc Preloading phụ thuộc vào yêu cầu cụ thể của ứng dụng, kích thước ứng dụng, và trải nghiệm người dùng mà bạn muốn cung cấp.
Trong Angular, service và factory là hai
cách để tạo và cung cấp các dịch vụ có thể tái sử dụng trong các ứng dụng. Dưới
đây là sự khác biệt chính giữa chúng:
new khi Angular tạo một instance của service.this, và bạn có thể thêm
các thuộc tính và phương thức vào đối tượng này.this.new, và bạn thêm các thuộc tính và phương thức vào
this.Cả hai đều là singleton trong Angular, có nghĩa là chỉ có một instance duy nhất được tạo ra và sử dụng trong toàn bộ ứng dụng. Sự lựa chọn giữa việc sử dụng service hay factory phụ thuộc vào phong cách lập trình và yêu cầu cụ thể của ứng dụng bạn đang phát triển.
Angular triển khai Virtual DOM như một phần của cơ chế phản ứng và cập nhật giao diện người dùng (UI) của nó. Virtual DOM là một biểu diễn bộ nhớ của DOM thực tế, cho phép Angular thực hiện các thay đổi một cách hiệu quả bằng cách chỉ cập nhật những phần của DOM thực tế cần thiết sau khi so sánh với Virtual DOM.
Khi một component hoặc dữ liệu thay đổi, Angular sẽ:
Cách tiếp cận này giúp giảm thiểu việc tái tạo toàn bộ DOM mỗi khi có một thay đổi nhỏ, giảm tải cho trình duyệt và cải thiện hiệu suất của ứng dụng. Angular cũng cung cấp các cơ chế như change detection để tự động phát hiện các thay đổi trong dữ liệu và kích hoạt quá trình cập nhật Virtual DOM.
Trong Angular, Pure Pipe là một loại pipe mà chỉ được thực thi khi Angular phát hiện ra một thay đổi "pure" đối với giá trị đầu vào của pipe. Một thay đổi "pure" được định nghĩa là một thay đổi đối với giá trị đầu vào nguyên thủy (như chuỗi, số, boolean, symbol) hoặc một thay đổi tham chiếu đối tượng (như thay đổi một mảng hoặc đối tượng sang một mảng hoặc đối tượng mới).
Pure pipes thích hợp sử dụng trong các trường hợp mà dữ liệu đầu vào thay đổi ít và bạn muốn đảm bảo rằng việc tính toán chỉ được thực hiện khi cần thiết. Ví dụ, một pipe để định dạng ngày tháng hoặc tiền tệ có thể là một pure pipe vì giá trị đầu vào (ngày tháng hoặc số tiền) thay đổi rõ ràng.
Ngược lại với pure pipes, Impure Pipes có thể phát hiện và phản ứng với các thay đổi bên trong đối tượng hoặc mảng mà không cần thay đổi tham chiếu. Impure pipes được thực thi trong mỗi chu kỳ phát hiện thay đổi, có thể dẫn đến việc giảm hiệu suất nếu không được sử dụng cẩn thận.
Tóm lại, Pure Pipe trong Angular là một công cụ mạnh mẽ cho việc biến đổi dữ liệu một cách hiệu quả, giúp tối ưu hóa hiệu suất ứng dụng bằng cách giảm thiểu số lần tính toán không cần thiết.
Angular, một framework phát triển ứng dụng web phía client do Google bảo trì, mang lại nhiều lợi ích đáng kể so với các framework khác nhờ vào kiến trúc, tính năng, và hỗ trợ cộng đồng mạnh mẽ của nó. Dưới đây là một số lợi thế chính của Angular:
Angular sử dụng kiến trúc dựa trên components, giúp phát triển các ứng dụng có cấu trúc mô-đun và dễ tái sử dụng. Mỗi component có thể độc lập với các phần khác của ứng dụng, làm cho việc bảo trì và quản lý mã trở nên dễ dàng hơn.
Angular cung cấp tính năng two-way data binding, tự động đồng bộ hóa dữ liệu giữa model và view. Điều này giúp giảm thiểu lượng mã cần thiết để kết nối dữ liệu với giao diện người dùng, đồng thời cải thiện trải nghiệm người dùng.
Angular hỗ trợ dependency injection, một mẫu thiết kế giúp quản lý các phụ thuộc giữa các lớp. Điều này làm cho việc phát triển ứng dụng trở nên linh hoạt hơn và giúp việc kiểm thử trở nên dễ dàng hơn.
Angular được viết bằng TypeScript, một siêu tập của JavaScript, cung cấp kiểm tra kiểu tĩnh và các tính năng lập trình hướng đối tượng. TypeScript giúp phát hiện lỗi sớm hơn trong quá trình phát triển và cải thiện khả năng bảo trì mã.
Angular cho phép phát triển ứng dụng cross-platform, từ Progressive Web Apps (PWAs) đến ứng dụng di động native-like với Angular + NativeScript. Điều này giúp tiết kiệm thời gian và nguồn lực khi phát triển ứng dụng cho nhiều nền tảng.
Angular được bảo trì bởi Google, đảm bảo rằng framework này sẽ tiếp tục được cập nhật và hỗ trợ trong tương lai. Sự hỗ trợ này cung cấp một mức độ tin cậy và ổn định cho các dự án sử dụng Angular.
Angular có một cộng đồng lớn và tích cực, cung cấp một lượng lớn tài nguyên học tập, thư viện, và plugin. Sự hỗ trợ từ cộng đồng giúp giải quyết vấn đề nhanh chóng và chia sẻ kiến thức.
Angular CLI là một công cụ mạnh mẽ giúp tự động hóa quá trình xây dựng và triển khai ứng dụng, từ việc tạo mới dự án, thêm components, đến việc triển khai ứng dụng lên máy chủ.
Tóm lại, Angular mang lại nhiều lợi ích cho việc phát triển ứng dụng web, từ kiến trúc mô-đun, hỗ trợ lập trình hướng đối tượng, đến khả năng phát triển cross-platform và hỗ trợ mạnh mẽ từ Google và cộng đồng.
Trong Angular, decorators là các hàm đặc biệt được
gọi với một ký hiệu @ đặt trước và theo sau là một lớp, phương thức
hoặc thuộc tính. Decorators là một phần của cú pháp ES2015 (hay còn gọi là ES6)
và được sử dụng rộng rãi trong Angular để định nghĩa và gắn các metadata cụ thể
cho các lớp, phương thức hoặc thuộc tính, giúp Angular hiểu cách chúng nên hoạt
động.
@Component và @NgModule, cho Angular biết
lớp đó là một component hoặc một module.@Input() và @Output(), cho Angular
biết thuộc tính đó là một input hoặc output của component.@HostListener, cho Angular biết phương thức
đó sẽ được gọi khi một sự kiện cụ thể xảy ra.@Inject(), được sử dụng để chèn
(inject) một dependency vào lớp.Decorators được sử dụng bằng cách đặt ký hiệu @ trước
tên của decorator và áp dụng nó trực tiếp lên lớp, thuộc tính, phương thức hoặc
tham số mà bạn muốn gắn metadata. Ví dụ:
import {Component, Input} from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
@Input() exampleInput: string;
}
Trong ví dụ trên, @Component là một class decorator
cho biết ExampleComponent là một Angular component, và
@Input() là một property decorator cho biết
exampleInput là một input property của component.
Decorators cung cấp một cách mạnh mẽ và linh hoạt để thêm các chức năng hoặc hành vi vào các lớp, thuộc tính, phương thức hoặc tham số mà không cần thay đổi mã nguồn của chúng. Trong Angular, decorators là một phần cốt lõi của framework, giúp định nghĩa các thành phần, dịch vụ, modules và tương tác giữa chúng một cách rõ ràng và dễ quản lý. Decorators giúp Angular hiểu cách xây dựng và tương tác với ứng dụng của bạn, từ đó tối ưu hóa quá trình phát triển và cung cấp một cấu trúc ứng dụng mạnh mẽ, linh hoạt.
Trong Angular, cả Annotation và
Decorator đều sử dụng ký hiệu @ nhưng chúng là hai
tính năng ngôn ngữ khác nhau.
annotations, lưu trữ một
mảng annotation trong đó, sau đó cố gắng khởi tạo một đối tượng với tên
giống như annotation, truyền metadata vào constructor.@Component, @NgModule), Property decorators (như
@Input và @Output), Method decorators (như
@HostListener), và Parameter decorators (như
@Injectable).Kết luận: Mặc dù cả hai đều được hỗ trợ bởi Angular, nhưng Decorators là tiêu chuẩn trong Angular do sự chuyển đổi từ AtScript sang TypeScript. Decorators là mặc định trong Angular, nhưng bạn cũng có thể sử dụng Annotations.
Single Page Applications (SPA) là các ứng dụng web mà khi sử dụng, trình duyệt chỉ cần tải một trang duy nhất từ máy chủ. Thay vì tải lại toàn bộ trang web khi người dùng tương tác với ứng dụng, SPA sử dụng JavaScript để tương tác với trang hiện tại và cập nhật nội dung mới.
Điều này có nghĩa là các tính năng và dữ liệu mới có thể được tải về và hiển thị trên cùng một trang mà không cần tải lại trang hoặc chuyển hướng sang trang khác. Điều này tạo ra trải nghiệm người dùng liền mạch và nhanh chóng hơn, vì người dùng không phải chờ đợi để tải lại toàn bộ trang web.
SPA thường sử dụng các framework JavaScript như React, Angular hoặc Vue.js để xây dựng các ứng dụng phức tạp. Các framework này cung cấp các công cụ và thư viện hỗ trợ cho việc quản lý trạng thái ứng dụng, định tuyến và tải dữ liệu từ máy chủ.
Một ưu điểm của SPA là khả năng tạo ra giao diện người dùng tương tác mượt mà và có trải nghiệm tương tự như ứng dụng máy tính. Tuy nhiên, việc tải toàn bộ mã và tài nguyên cần thiết cho ứng dụng ban đầu có thể làm cho thời gian tải ban đầu lâu hơn so với các ứng dụng truyền thống.
Với sự phát triển của công nghệ web, SPA đã trở thành một phong cách phát triển phổ biến và được sử dụng rộng rãi trong việc xây dựng các ứng dụng web hiện đại.
Trong Angular, Dependency Injection (DI) là một mẫu thiết kế phần mềm mà một lớp nhận các phụ thuộc của nó từ các nguồn bên ngoài thay vì tạo chúng trực tiếp. DI là một tính năng mạnh mẽ và nổi bật của Angular, giúp giảm sự phụ thuộc cứng nhắc giữa các lớp và tạo ra mã nguồn dễ bảo trì, dễ kiểm thử hơn.
Khi bạn tạo một service trong Angular, bạn có thể sử dụng
decorator @Injectable để định nghĩa scope mà service có thể được
inject. Sau đó, bạn có thể yêu cầu service này trong constructor của một
component hoặc lớp khác:
@Injectable({
providedIn: 'root', // Scope toàn cục
})
export class MyService {
// ...
}
@Component({
// ...
})
export class MyComponent {
constructor(private myService: MyService) {
// Angular sẽ tự động inject MyService vào MyComponent
}
}
Trong ví dụ trên, MyService được định nghĩa để có thể
được inject vào bất kỳ lớp nào trong ứng dụng. MyComponent yêu cầu
MyService thông qua constructor của nó, và Angular sẽ tự động cung
cấp một instance của MyService khi tạo MyComponent.
Trong Angular, pipes là các hàm đơn giản được sử dụng trong các biểu thức template để chấp nhận một giá trị đầu vào, xử lý nó, và trả về một giá trị đã được biến đổi. Pipes giúp bạn dễ dàng biến đổi dữ liệu để hiển thị mục đích trong các template mà không cần thay đổi cách dữ liệu được biểu diễn trong component của bạn.
DatePipe), chuyển đổi chữ hoa và chữ thường
(UpperCasePipe, LowerCasePipe), định dạng tiền tệ
(CurrencyPipe), và nhiều hơn nữa.Để tạo một custom pipe, bạn cần định nghĩa một lớp trong
TypeScript và trang trí nó với @Pipe decorator, cung cấp một tên
cho pipe của bạn. Lớp này phải thực thi PipeTransform interface,
bao gồm một phương thức transform mà bạn sẽ triển khai để xác định
cách dữ liệu được biến đổi.
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'customPipe'})
export class CustomPipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
// Logic biến đổi dữ liệu
return transformedValue;
}
}
Sau khi tạo, bạn có thể sử dụng custom pipe của mình trong các
template giống như cách sử dụng các built-in pipe, bằng cách sử dụng tên pipe và
ký tự pipe (|).
Pipes là một công cụ mạnh mẽ trong Angular, giúp bạn dễ dàng biến đổi và hiển thị dữ liệu trong các ứng dụng web một cách linh hoạt và hiệu quả.
Routing Guard trong Angular là một tính năng cho phép bạn kiểm soát việc điều hướng trong ứng dụng của mình. Cụ thể, nó cho phép bạn quyết định liệu có cho phép điều hướng đến một route cụ thể hay không dựa trên các điều kiện nhất định. Routing Guard được thực hiện thông qua việc sử dụng các interface như CanActivate, CanActivateChild, CanDeactivate, CanLoad, và Resolve. Mỗi interface này cung cấp một cách khác nhau để kiểm soát việc điều hướng, từ việc kiểm tra quyền truy cập trước khi điều hướng đến một route, cho đến việc xác định liệu có cho phép rời khỏi một route đang được hiển thị hay không[2][3].
Ví dụ, CanActivate được sử dụng để kiểm tra xem người dùng có được phép truy cập vào một route cụ thể hay không trước khi route đó được kích hoạt. Nếu CanActivate trả về true, điều hướng sẽ tiếp tục; nếu trả về false, điều hướng sẽ bị hủy bỏ. Tương tự, CanDeactivate cho phép bạn kiểm tra xem liệu có cho phép người dùng rời khỏi một route cụ thể hay không, có thể dựa trên việc người dùng đã lưu thay đổi hay chưa[1][2].
Routing Guard là một công cụ quan trọng trong Angular, giúp tăng cường bảo mật và kiểm soát luồng điều hướng trong ứng dụng, đảm bảo rằng người dùng chỉ có thể truy cập vào các phần của ứng dụng mà họ có quyền.
Citations:
[1]
https://viblo.asia/p/bao-ve-routes-su-dung-guards-trong-angular-3Q75wWX35Wb
[2]
https://viblo.asia/p/angular-authentication-su-dung-route-guards-Ljy5Vqaolra
[3]
https://angular8.hashnode.dev/angular-router
[4]
https://longnv.name.vn/lap-trinh-angular/authentication-trong-angular
[5]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day030-router-guards-resolvers.md
[6]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day031-router-guards-resolvers-2.md
[7]
https://kungfutech.edu.vn/bai-viet/angular/guards-and-resolved-phan-1
[8]
https://kungfutech.edu.vn/bai-viet/angular/guards-and-resolved-phan-3
Trong Angular, Module, cụ thể là NgModule, là một cách tổ chức code trong ứng dụng Angular. Một Angular Module giúp chia nhỏ các ứng dụng phức tạp thành nhiều phần nhỏ hơn, từ đó giúp dễ dàng phát triển, nâng cấp và tăng tốc độ hoạt động của ứng dụng[2]. Mỗi ứng dụng Angular có thể chia thành nhiều module tùy thuộc vào độ lớn nhỏ của ứng dụng. Mỗi module này gồm nhiều component, directive, và dịch vụ (services)[2][3].
Một Angular Module được định nghĩa bằng cách sử dụng decorator
@NgModule, và nó chứa các phần sau:
CommonModule hoặc các form control của
FormsModule, bạn cần phải nhập các module này vào[2][3].providers không còn bắt buộc nữa do tính năng
providedIn của dịch vụ[3].Mỗi Angular Module cung cấp một không gian phạm vi riêng biệt cho các component, directive, và dịch vụ mà nó chứa, giúp quản lý và tổ chức code trở nên dễ dàng hơn.
Citations:
[1]
https://www.angularvietnam.com/day/day-two/
[2]
https://longnv.name.vn/lap-trinh-angular/module-trong-angular
[3]
https://viblo.asia/p/hieu-ve-angular-modules-ngmodule-va-scope-cua-no-naQZRLJm5vx
[4]
https://xuanthulab.net/tao-va-su-dung-module-trong-angular.html
[5]
https://viblo.asia/p/angular-4-tu-a-den-z-Qbq5QLpwlD8
[6]
https://viettuts.vn/angular7/module-trong-angular7
[7]
https://fptshop.com.vn/tin-tuc/danh-gia/angular-167279
[8]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/tong-quan-kien-truc-angular-va-cac-khai-niem-261.html
[9]
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
[10]
https://www.tiepphan.com/angular-http-client-module-introduction/
[11]
https://levunguyen.com/laptrinhweb/2021/06/03/co-che-hoat-dong-trong-Angular/
[12]
https://topdev.vn/blog/angular-tu-xay-dung-module-lazy-load-images/
Trong Angular, tương đương của ngShow và ngHide là các directive
*ngIf và [hidden]. Directive *ngIf được
sử dụng để thêm hoặc xóa một phần tử HTML khỏi DOM dựa trên một biểu thức điều
kiện. Nếu biểu thức đúng, phần tử sẽ được hiển thị; nếu sai, phần tử sẽ bị xóa
khỏi DOM. Trong khi đó, thuộc tính [hidden] được sử dụng để ẩn một
phần tử HTML mà không xóa nó khỏi DOM; nếu biểu thức điều kiện đúng, phần tử sẽ
bị ẩn, và nếu sai, phần tử sẽ được hiển thị[4].
Citations:
[1]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[2]
https://www.guru99.com/vi/angularjs-events.html
[3]
https://www.studocu.com/vn/document/truong-dai-hoc-nguyen-tat-thanh/thiet-ke-web/chuong-7-directive-ng-trong-angular/79903314
[4]
https://viblo.asia/p/tim-hieu-angularjs-Q7eEREDQvgNj
[5]
https://freetuts.net/directive-ng-show-va-ng-hide-trong-angularjs-220.html
[6]
https://viblo.asia/p/common-directives-nhung-chi-thi-pho-bien-trong-angularjs-7prv315mMKod
[7]
https://dandev.net/bai-12-su-dung-ng-show-va-ng-hide-trong-angularjs-nhu-the-nao
[8]
https://websitehcm.com/animations-trong-angular/
Trong Angular, Pipes là các công cụ được sử dụng để chuyển đổi dữ
liệu hiển thị trên template một cách linh hoạt và dễ dàng. Pipes nhận một giá
trị đầu vào và trả về một giá trị đầu ra sau khi đã được biến đổi. Angular cung
cấp một số Pipes có sẵn như AsyncPipe, CurrencyPipe,
DatePipe, DecimalPipe, JsonPipe,
LowerCasePipe, PercentPipe, SlicePipe,
TitleCasePipe, và UpperCasePipe. Một điểm đáng chú ý
là Angular không bao gồm FilterPipe hoặc OrderByPipe
như trong AngularJS[1].
Pipes trong Angular được phân thành hai loại chính:
pure pipe và impure pipe. Pure pipe chỉ thực hiện thay
đổi khi giá trị đầu vào thay đổi, phù hợp với các đối tượng không thay đổi
(immutable objects) hoặc các kiểu dữ liệu nguyên thủy như chuỗi, số, boolean.
Trong khi đó, impure pipe thực hiện thay đổi mỗi chu kỳ của Change Detection,
tức là mỗi khi có sự thay đổi trong state của ứng dụng để cập nhật dữ liệu một
cách đồng bộ[1].
Để tạo một Custom Pipe trong Angular, bạn cần thực
hiện theo các bước sau:
@Pipe,
trong đó cần chỉ định tên của pipe thông qua thuộc tính name.
PipeTransform và phương thức
transform của interface này, nơi bạn sẽ định nghĩa cách biến
đổi dữ liệu từ đầu vào sang đầu ra.declarations của module tương ứng mà bạn muốn sử dụng pipe[2].
Ví dụ về cách sử dụng một pipe trong Angular:
<p>{{ 'hello world' | uppercase }}</p>
Kết quả hiển thị sẽ là "HELLO WORLD". Trong ví dụ này,
uppercase là tên của UpperCasePipe được sử dụng để
chuyển đổi chuỗi "hello world" thành chữ in hoa[2].
Ngoài ra, bạn cũng có thể sử dụng nhiều pipe cùng một lúc
(chaining pipes) để đạt được kết quả mong muốn. Ví dụ, kết hợp
DatePipe và UpperCasePipe để hiển thị ngày sinh nhật
của một nhân vật trong định dạng ngày tháng viết hoa[3].
Tóm lại, Pipes trong Angular là một công cụ mạnh mẽ giúp chuyển đổi dữ liệu hiển thị trên giao diện người dùng một cách linh hoạt và dễ dàng, từ đó tăng cường trải nghiệm người dùng và giảm thiểu công sức lập trình cần thiết cho việc biến đổi dữ liệu[1][2][3].
Citations:
[1]
https://www.tiepphan.com/thu-nghiem-voi-angular-pipe-trong-angular/
[2]
https://caodang.fpt.edu.vn/tin-tuc-poly/ha-noi-tin-sinh-vien/pipes-la-gi-cach-chuyen-doi-du-lieu-nhan-duoc-tu-api.html
[3]
https://viblo.asia/p/tim-hieu-pipe-trong-angular-GrLZD332Kk0
[4]
https://levunguyen.com/laptrinhweb/2021/06/20/su-dung-pipes-trong-angular/
[5]
https://viblo.asia/p/su-dung-pipes-trong-angular-OeVKBjkQKkW
[6]
https://kungfutech.edu.vn/bai-viet/angular/pipes-trong-angular
[7]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day018-pipes.md
[8]
https://quantrimang.com/cong-nghe/nhung-dieu-can-biet-ve-pipe-trong-angular-198672
Trong Angular, @Component và @Directive đều là những khái niệm quan trọng, nhưng chúng có mục đích và đặc điểm khác nhau.
Sự khác biệt chính giữa hai khái niệm này là:
Nói cách khác, component định nghĩa cấu trúc và giao diện của một phần tử, trong khi directive thay đổi hành vi và giao diện của các phần tử hoặc component đã có sẵn.
Citations:
[1]
https://topviecit.vn/blog/cau-hoi-phong-van-angular/
[2]
https://viblo.asia/p/angular-js-directive-vs-component-JQVkVzgJkyd
[3]
https://vntalking.com/angular-day-4-thuc-hanh-component-directive-va-service.html
[4]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/tong-quan-kien-truc-angular-va-cac-khai-niem-261.html
[5]
https://levunguyen.com/laptrinhweb/2021/06/13/su-dung-directive-trong-angular/
[6]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day006-Attribute-Directive-Class-Style.md
[7]
https://kungfutech.edu.vn/cau-hoi-phong-van/directives-trong-angular-la-gi
[8]
https://www.youtube.com/watch?v=vLWk8Qi0-pw
Module bootstrapping là một khái niệm trong lập trình và phát triển phần mềm, đặc biệt là trong các ứng dụng web và ứng dụng đơn trang (SPA). Trong ngữ cảnh của Angular, một framework phổ biến cho việc phát triển ứng dụng web, bootstrapping là quá trình khởi động một ứng dụng. Module bootstrapping là module chính mà Angular sử dụng để khởi chạy ứng dụng. Nó thiết lập môi trường chạy cho ứng dụng và làm cho các thành phần của ứng dụng sẵn sàng để được thực thi.
Trong Angular, quá trình này thường bắt đầu với file
main.ts, nơi module gốc của ứng dụng (thường là
AppModule) được truyền vào hàm
platformBrowserDynamic().bootstrapModule(). Điều này nói cho
Angular biết rằng nên khởi động ứng dụng bằng cách sử dụng module này làm điểm
bắt đầu. Module gốc sau đó sẽ khai báo các thành phần, dịch vụ và các module
khác mà ứng dụng sẽ sử dụng.
Tóm lại, module bootstrapping trong ngữ cảnh phát triển ứng dụng (đặc biệt là với Angular) là module chính được sử dụng để khởi động và thiết lập môi trường chạy cho ứng dụng.
Citations:
[1]
https://tenten.vn/tin-tuc/bootstrap-la-gi/
[2]
https://www.goffice.vn/article/bootstrapping-la-gi-vi-sao-duoc-goi-la-phuong-phap-tu-than-van-dong-250.html
[3]
https://vietnambiz.vn/phuong-phap-tu-than-van-dong-bootstrapping-trong-khoi-nghiep-la-gi-20200228172314809.htm
[4]
https://startupwheel.vn/vi/phuong-phap-bootstrapping-trong-khoi-nghiep/
[5]
https://bizzi.vn/so-tay-ke-toan-giai-thich-thuat-ngu-bootstrapping/
[6]
https://codegym.vn/blog/bootstrap-la-gi/
[7]
https://janeto.gitbook.io/angular-2-co-ban/gioi-thieu-ve-components/bootstrapping
[8]
https://www.youtube.com/watch?v=o_uKEwqw7hY
Sự khác biệt chính giữa ngIf và [hidden]
trong Angular là cách chúng kiểm soát việc hiển thị của một phần tử trong DOM.
*ngIf là một chỉ thị cấu trúc (structural directive), nghĩa là nó có thể thêm
hoặc loại bỏ hoàn toàn các phần tử khỏi DOM dựa trên điều kiện được đặt ra. Khi
điều kiện của *ngIf là false, phần tử cùng với nội dung của nó sẽ không được tạo
ra trong DOM, do đó không thể tương tác hay xử lý sự kiện[2][4][5][6].
Trong khi đó, [hidden] chỉ là một thuộc tính đơn giản
mà khi được đặt thành true, nó sẽ đặt thuộc tính CSS display của phần tử đó
thành none, làm cho phần tử không hiển thị trên trang. Tuy nhiên, phần tử vẫn
tồn tại trong DOM và có thể tương tác được, chỉ là không nhìn thấy mà thôi[2][6].
Một điểm khác biệt nữa là về hiệu suất: việc thêm và loại bỏ phần
tử khỏi DOM như *ngIf có thể tốn kém hơn so với việc chỉ thay đổi thuộc tính
hiển thị như [hidden], đặc biệt là khi cần thay đổi trạng thái hiển
thị thường xuyên[2][6].
Do đó, [hidden] thường được sử dụng khi trạng thái hiển thị của
phần tử cần được thay đổi thường xuyên, trong khi *ngIf thích hợp hơn cho những
trường hợp mà việc hiển thị phần tử phụ thuộc vào một điều kiện cụ thể và không
thay đổi thường xuyên[2][6].
Citations:
[1]
https://freetuts.net/directive-ng-show-va-ng-hide-trong-angularjs-220.html
[2]
https://iq.js.org/questions/angular/what-is-the-difference-between-ngif-and-hidden-property
[3]
https://viblo.asia/p/angular-2-can-ban-phan-5-forms-and-validation-YWOZryJwKQ0
[4]
https://longnv.name.vn/lap-trinh-angular/cac-chi-thi-thuong-dung-trong-view-angular
[5]
https://viblo.asia/p/structural-directives-in-angular-Qbq5QQrJ5D8
[6]
https://stackoverflow.com/questions/43034758/what-is-the-difference-between-ngif-and-hidden
[7]
https://itzone.com.vn/vi/article/structural-directives-in-angular/
[8]
https://www.phongvanit.com/ky-nang/angular-1016
Observable trong lập trình phản ứng (Reactive Programming) là một
khái niệm trung tâm, thường được hiểu là một đối tượng hoặc một function (class)
đặc biệt có khả năng phát ra một chuỗi các sự kiện hoặc giá trị theo thời gian.
Nó nhận vào một function, và function này có thể gọi các phương thức như
next để phát ra giá trị, error để báo lỗi, và
complete để thông báo rằng chuỗi giá trị đã kết thúc. Các lập trình
viên có thể tạo ra Observable bằng cách sử dụng các phương thức như
new hoặc Rx.Observable.create, và sau đó có thể đăng
ký (subscribe) để lắng nghe và xử lý các giá trị được phát ra bởi
Observable[1].
Citations:
[1]
https://www.tiepphan.com/rxjs-reactive-programming/
[2]
https://viblo.asia/p/java-tim-hieu-cac-observableobserver-cua-rxjava-Ljy5VLVzZra
[3]
https://magz.techover.io/2023/06/21/observable-observer-trong-rxjava-rx-in-android-part-2/
[4]
https://viblo.asia/p/rxjs-va-reactive-programming-63vKj6oxK2R
[5]
https://vi.wikipedia.org/wiki/Bi%E1%BA%BFn_quan_s%C3%A1t
[6]
https://vtitech.vn/tim-hieu-ve-rxandroid-phan-1-creating-observables/
[7]
https://xuanthulab.net/lop-observablecollection-trong-c-net.html
[8]
https://topdev.vn/blog/gioi-thieu-ve-reactive-programing-trong-javascript/
Trong Angular, Directive cấu trúc (Structural directives) và Directive thuộc tính (Attribute directives) đều là những công cụ mạnh mẽ giúp thao tác và tương tác với DOM, nhưng chúng có những mục đích và cách thức hoạt động khác nhau.
Directive cấu trúc (Structural directives) thay
đổi layout của DOM bằng cách thêm hoặc xóa các phần tử DOM. Chúng thường được sử
dụng để thay đổi cấu trúc của DOM dựa trên một điều kiện hoặc một danh sách các
phần tử. Ví dụ phổ biến của directive cấu trúc bao gồm *ngIf, *ngFor, và
*ngSwitch, với dấu * ở trước tên directive để chỉ ra rằng chúng có thể thay đổi
cấu trúc của DOM[2][3].
Directive thuộc tính (Attribute directives) thay đổi giao diện
hoặc hành vi của các phần tử DOM mà chúng được áp dụng lên, nhưng không thay đổi
cấu trúc của DOM. Chúng thường được sử dụng để thay đổi ngoại hình hoặc hành vi
của một phần tử, ví dụ như thay đổi màu sắc, kích thước, hoặc thêm các sự kiện
tương tác. Ví dụ của directive thuộc tính bao gồm ngStyle và ngClass, giúp thay
đổi style và class của phần tử[1][2].
Tóm lại, sự khác biệt chính giữa hai loại directive này là: Directive cấu trúc thay đổi cấu trúc của DOM bằng cách thêm hoặc xóa các phần tử, trong khi Directive thuộc tính thay đổi giao diện hoặc hành vi của các phần tử mà không thay đổi cấu trúc của DOM.
Citations:
[1]
https://kungfutech.edu.vn/cau-hoi-phong-van/directives-trong-angular-la-gi
[2]
https://viblo.asia/p/tim-hieu-co-ban-ve-directives-trong-angular-ByEZk2roKQ0
[3]
https://viblo.asia/p/structural-directives-in-angular-Qbq5QQrJ5D8
[4]
https://levunguyen.com/laptrinhweb/2021/06/13/su-dung-directive-trong-angular/
[5]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/tong-quan-kien-truc-angular-va-cac-khai-niem-261.html
[6]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day006-Attribute-Directive-Class-Style.md
[7]
https://www.youtube.com/watch?v=j4IZPHtQiS0
[8]
https://www.youtube.com/watch?v=gwj22pk_iAk
Component và Module trong Angular đều là những khái niệm cơ bản và quan trọng trong việc xây dựng ứng dụng web, nhưng chúng có những chức năng và mục đích sử dụng khác nhau.
Component trong Angular là các khối xây dựng cơ bản của ứng dụng Angular. Mỗi Component đều có một template HTML mô tả cách hiển thị giao diện người dùng và một class TypeScript chứa dữ liệu và logic. Component có thể tương tác với các Component khác thông qua các cơ chế như Input và Output. Component cũng có thể có các lifecycle hook cho phép chúng ta can thiệp vào các giai đoạn khác nhau trong vòng đời của Component, từ khi khởi tạo đến khi bị hủy[6].
Module trong Angular, được định nghĩa bằng decorator
@NgModule, là một cách để tổ chức và nhóm các thành phần có liên
quan như Components, Services, Directives, Pipes, và các Module khác. Module
định nghĩa một không gian phạm vi trong đó các Component có thể được khai báo,
cung cấp các dịch vụ, và thiết lập các phụ thuộc. Module cũng giúp chia nhỏ ứng
dụng thành các phần nhỏ hơn, có thể tái sử dụng và quản lý dễ dàng hơn. Module
cung cấp cơ chế để lazy loading, giúp tải các phần của ứng dụng một cách linh
hoạt và hiệu quả khi cần thiết[1][2][5].
Như vậy, Component và Module đóng vai trò khác nhau nhưng đều cần thiết trong việc xây dựng và tổ chức cấu trúc của một ứng dụng Angular.
Citations:
[1]
https://viblo.asia/p/hieu-ve-angular-modules-ngmodule-va-scope-cua-no-naQZRLJm5vx
[2]
https://xuanthulab.net/tao-va-su-dung-module-trong-angular.html
[3]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/tong-quan-kien-truc-angular-va-cac-khai-niem-261.html
[4]
https://nhanhoa.com/tin-tuc/angular-la-gi.html
[5]
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
[6]
https://longnv.name.vn/lap-trinh-angular/su-dung-component-trong-angular
[7]
https://fptshop.com.vn/tin-tuc/danh-gia/angular-167279
[8]
https://sec.vnpt.vn/2023/01/angular_trong_phat_trien_ung_dung_web_part_2/
Để bảo vệ một thành phần được kích hoạt thông qua bộ định tuyến,
bạn có thể sử dụng "Route Guards" trong Angular. Route Guards là các dịch vụ mà
Angular sử dụng để kiểm soát việc truy cập vào một route hoặc rời khỏi route đó.
Có nhiều loại Route Guards khác nhau, nhưng để bảo vệ một thành phần, bạn có thể
sử dụng CanActivate để kiểm tra xem người dùng có được phép truy
cập vào thành phần đó hay không trước khi route được kích hoạt.
Đây là một ví dụ về cách sử dụng CanActivate:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
const isAuthenticated = //... kiểm tra trạng thái xác thực của người dùng
if (!isAuthenticated) {
this.router.navigate(['/login']); // Chuyển hướng người dùng đến trang đăng nhập nếu chưa xác thực
return false;
}
return true;
}
}
const routes: Routes = [
{ path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] }
];
Trong ví dụ trên, AuthGuard sẽ kiểm tra xem người
dùng có được xác thực để truy cập vào ProtectedComponent hay không.
Nếu không, người dùng sẽ được chuyển hướng đến trang đăng nhập.
Citations:
[1]
https://moet.gov.vn/content/vanban/Lists/VBDT/Attachments/1559/3.%20Ch%C6%B0%C6%A1ng%20tr%C3%ACnh%20m%C3%B4n%20Ti%E1%BA%BFng%20vi%E1%BB%87t.pdf
[2]
https://www.tienganh123.com/dich-cau-viet-anh
[3]
https://tracau.vn
[4]
https://lingvanex.com/translation/tieng-viet-sang-tieng-anh
[5]
https://nhanhoa.com/tin-tuc/dich-tieng-viet-sang-tieng-anh.html
[6]
https://learningvietnamese.edu.vn/tin-tuc/giao-tiep-tieng-viet/cach-chao-hoi-trong-tieng-viet/
[7]
https://hoctot.hocmai.vn/cac-kieu-cau-trong-tieng-viet.html
[8]
https://vietjack.com/tieng-viet-4-kn/
[9]
https://unica.vn/blog/dich-cau-tieng-anh-chuan
[10]
https://flyer.vn/website-dich-tieng-anh-sang-tieng-viet/
[11]
https://www.gotquestions.org/Viet/
[12]
https://www.thegioididong.com/game-app/top-9-trang-web-dich-tieng-anh-chuyen-nganh-chuan-nhat-tot-1339665
[13]
https://loigiaihay.com/tieng-viet-lop-4-c118.html
[14]
https://translate.google.com/?hl=vi&op=translate&sl=en&tl=vi
[15]
https://www.youtube.com/watch?v=eg4GQGyuiuE
[16]
https://loigiaihay.com/tieng-viet-1-tap-2-ket-noi-tri-thuc-voi-cuoc-song-e28614.html
Các loại ràng buộc dữ liệu có thể được phân loại dựa trên hướng dòng chảy của dữ liệu. Có ba loại ràng buộc dữ liệu chính được phân biệt bởi hướng dòng chảy của dữ liệu như sau:
Từ nguồn đến giao diện người dùng (One-way): Đây là loại ràng buộc một chiều, nơi dữ liệu được truyền từ nguồn (thường là mã logic hoặc model) đến giao diện người dùng (view). Các cú pháp có thể sử dụng cho loại ràng buộc này bao gồm:
{{expression}}[target]="expression"bind-target="expression"Từ giao diện người dùng đến nguồn (One-way): Loại ràng buộc này cũng là một chiều nhưng ngược lại, từ giao diện người dùng truyền dữ liệu về nguồn. Các cú pháp có thể sử dụng cho loại ràng buộc này bao gồm:
(target)="statement"on-target="statement"Từ giao diện người dùng đến nguồn và ngược lại (Two-way): Đây là loại ràng buộc hai chiều, nơi dữ liệu có thể chảy từ nguồn đến giao diện người dùng và từ giao diện người dùng trở lại nguồn. Các cú pháp có thể sử dụng cho loại ràng buộc này bao gồm:
[(target)]="expression"bindon-target="expression"[1].Ngoài ra, các nguồn khác cũng mô tả ràng buộc dữ liệu là kỹ thuật tổng quát liên kết nguồn dữ liệu từ nhà cung cấp và người tiêu dùng lại với nhau và đồng bộ hóa chúng[2]. Trong WPF của .NET, ràng buộc dữ liệu cung cấp một cách đơn giản và nhất quán để ứng dụng hiển thị và tương tác với dữ liệu từ các nguồn dữ liệu khác nhau dưới dạng đối tượng .NET và XML[3]. Trong Angular, có nhiều cách để ràng buộc dữ liệu giữa các thành phần và giao diện người dùng, bao gồm nội suy, ràng buộc thuộc tính, ràng buộc sự kiện và ràng buộc hai chiều[4][6].
Citations:
[1]
https://iq.js.org/questions/angular/how-do-you-categorize-data-binding-types
[2]
https://en.wikipedia.org/wiki/Data_binding
[3]
https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/?view=netdesktop-8.0
[4]
https://www.c-sharpcorner.com/blogs/different-types-of-data-binding-in-angular
[5]
https://dev.to/flippedcoding/what-is-data-binding-ghn
[6]
https://reintech.io/blog/types-data-binding-angular
[7]
https://www.geeksforgeeks.org/how-many-types-of-data-bindings-in-angularjs/
[8]
https://www.javatpoint.com/data-binding-in-angular-8
[9]
https://www.geeksforgeeks.org/angularjs-data-binding/
[10]
https://www.edureka.co/blog/angular-data-binding/
[11]
https://angular.io/guide/binding-syntax
[12]
https://www.knowledgehut.com/blog/web-development/data-binding-in-angular
[13]
https://study.com/academy/lesson/data-binding-definition-examples.html
Để chèn thẻ base href vào một tài liệu HTML, bạn cần thêm thẻ
<base> vào trong phần <head> của tài liệu.
Thẻ <base> được sử dụng để xác định URL cơ sở cho tất cả các
đường dẫn tương đối trong tài liệu. Cú pháp cơ bản của thẻ này như sau:
<head>
<base href="URL_cơ_sở" target="mục_tiêu_mặc_định">
</head>
Trong đó:
href="URL_cơ_sở": Bạn cần thay thế URL_cơ_sở bằng
URL mà bạn muốn sử dụng làm cơ sở cho các đường dẫn tương đối trong tài liệu
của mình.target="mục_tiêu_mặc_định": Thuộc tính này là tùy chọn và được
sử dụng để xác định cách mở các liên kết (ví dụ: trong cùng cửa sổ, tab mới,
v.v.). Các giá trị có thể là _blank, _self,
_parent, _top.Ví dụ, nếu bạn muốn tất cả các đường dẫn tương đối trong tài liệu
HTML của mình dựa trên URL cơ sở là https://www.example.com và mở
trong cùng một cửa sổ, bạn sẽ chèn thẻ <base> như sau:
<head>
<base href="https://www.example.com" target="_self">
</head>
Lưu ý rằng mỗi tài liệu HTML chỉ nên có một thẻ
<base> và nó phải được đặt trong phần
<head> của tài liệu[1][2][3][4][5].
Citations:
[1]
https://webcoban.vn/html/the-base-la-gi-the-base-dung-lam-gi-cach-su-dung-the-base-trong-html.html
[2]
https://quantrimang.com/hoc/the-html-base-190186
[3]
https://isinhvien.com/the-base-la-gi-cach-xac-dinh-kieu-mo-lien-ket-trong-1-file-html/
[4]
https://alantien.com/tag-base-la-gi.html
[5]
https://freetuts.net/the-base-trong-html-4893.html
[6]
https://vietnix.vn/tuy-chinh-slug-va-base-url-tac-gia-wordpress/
[7]
https://hoclaptrinh.vn/tutorial/tag-html/the-base-trong-html
[8]
https://help.base.vn/support/solutions/articles/63000268364-base-hrm-c%C3%A0i-%C4%91%E1%BA%B7t-c%C3%A1ch-thi%E1%BA%BFt-l%E1%BA%ADp-web-checkin-client
Eager module loading, hay tải module hăng hái, là quá trình tải các module ngay trước khi ứng dụng bắt đầu chạy. Đây là chiến lược tải module mặc định trong nhiều framework phát triển ứng dụng, như Angular. Việc sử dụng eager loading phù hợp trong các trường hợp sau:
Ứng dụng có kích thước nhỏ: Khi ứng dụng không quá lớn, việc tải tất cả các module ngay từ đầu không làm ảnh hưởng đáng kể đến thời gian tải trang, và ứng dụng sẽ phản hồi nhanh hơn khi xử lý các yêu cầu[1].
Module cốt lõi và các module cần thiết để khởi động ứng dụng: Các module chứa các thành phần của trang đầu tiên, các bộ chặn (interceptors) cho xác thực, ủy quyền, xử lý lỗi, các thành phần phản hồi lỗi, định tuyến cấp cao, và địa phương hóa, v.v., cần được tải ngay lập tức để ứng dụng có thể hoạt động đúng cách bất kể kích thước của ứng dụng[1].
Eager loading không phải lúc nào cũng là lựa chọn tốt nhất, đặc biệt là đối với các ứng dụng lớn vì nó có thể gây ra thời gian tải trang dài hơn và ảnh hưởng đến trải nghiệm người dùng. Trong những trường hợp đó, các chiến lược tải khác như Lazy Loading (tải module theo yêu cầu) hoặc Pre-Loading (tải trước các module cụ thể) có thể được sử dụng để cải thiện hiệu suất[1][2].
Citations:
[1]
https://www.linkedin.com/pulse/types-loading-angular-eager-lazy-pre-loading-hilel-attia
[2]
https://viblo.asia/p/angular-cai-thien-hieu-nang-va-trai-nghiem-nguoi-dung-voi-lazy-loading-djeZ1BkRlWz
[3]
https://topdev.vn/blog/kien-thuc-ve-lazy-loading-images-ma-ban-can-biet/
[4]
https://guides.rubyonrails.org/classic_to_zeitwerk_howto.html
[5]
https://learn.microsoft.com/en-us/ef/core/querying/related-data/
[6]
https://luanvv.com/blog/spring-data-jpahibernate-nhng-sai-lm-ng-ngn-khong-phi-ai-cng-bit/
[7]
https://taivublog.com/2016/12/17/angular-2-meteor-data-management-and-routing-multiple-views/
[8]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[9]
https://vutruso.com/cach-toi-uu-diem-core-web-vitals/
[10]
https://www.hostinger.vn/huong-dan/wordpress-toan-tap
[11]
https://github.com/facebookincubator/cinder
[12]
https://docs.jboss.org/hibernate/orm/6.0/userguide/html_single/Hibernate_User_Guide.html
[13]
https://typeorm.io
[14]
https://ronde.cz/triatlonove-novinky/do-uplneho-vycerpani-proc-se-vyplati-podstoupit-zatezovy-test/
[15]
https://www.babla.vn/tieng-anh/loading
[16]
https://viblo.asia/p/eager-loading-trong-laravel-su-dung-with-hay-load-RnB5p0bG5PG
[17]
https://viblo.asia/p/5-gem-nen-dung-trong-trong-phat-trien-ung-dung-rails-V3m5WzQQlO7
[18]
https://netcore.vn/bai-viet/kien-thuc-entity-framwork/su-khac-nhau-cua-lazyloading-earger-loading-va-explicit-loading-trong-entity-framework
[19]
https://www.researchgate.net/publication/316146049_A_Meta-analysis_of_Online_Trust_Relationships_in_E-commerce
[20]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day029-router-lazy-load.md
Wildcard route có mục đích chính là xử lý các URL không khớp với bất kỳ route nào đã được định nghĩa trước trong ứng dụng. Nó thường được sử dụng để hiển thị trang lỗi 404, thông báo cho người dùng rằng URL họ đã yêu cầu không tồn tại trong ứng dụng. Wildcard route được định nghĩa bằng cách sử dụng hai dấu sao (**) trong đường dẫn của nó, và nó nên được đặt ở cuối cùng trong danh sách các route để đảm bảo rằng tất cả các URL không khớp với route nào khác sẽ được chuyển hướng đến nó[13].
Citations:
[1]
https://viblo.asia/p/huong-dan-co-ban-phat-trien-web-voi-khung-phat-trien-laravel-phan-2-bWrZn4dO5xw
[2]
https://www.forum.vnpro.org/forum/ccna%C2%AE/icnd-2-routing-access-list/2407-thac-mac-ve-wildcard-mask
[3]
https://www.forum.vnpro.org/forum/ccna%C2%AE/icnd-2-routing-access-list/424106-m%E1%BB%8Di-ng%C6%B0%E1%BB%9Di-gi%C3%BAp-em-hi%E1%BB%83u-v%E1%BB%81-wildcard-mask-v%E1%BB%9Bi-%E1%BA%A1
[4]
https://tedu.com.vn/lap-trinh-aspnet-core/co-che-routing-trong-aspnet-core-227.html
[5]
https://thegioimang.vn/dien-dan/threads/wildcard-mask-l%C3%A0-g%C3%AC-wildcard-masks-%C4%91%C6%B0%E1%BB%A3c-s%E1%BB%AD-d%E1%BB%A5ng-trong-m%E1%BA%A1ng-nh%C6%B0-th%E1%BA%BF-n%C3%A0o.642/
[6]
https://hainguyenit.edubit.vn/blog/wildcard-mask-de-bat-cac-subnet-khong-lien-tuc
[7]
https://angular8.hashnode.dev/angular-router
[8]
https://viblo.asia/p/routing-trong-angular-co-the-ban-chua-biet-Qbq5Q6n3KD8
[9]
https://stackoverflow.com/questions/19725634/wildcard-in-webapi-route-template
[10]
https://www.geeksforgeeks.org/understanding-the-function-of-a-wildcard-route-in-express-js/
[11]
https://stackoverflow.com/questions/53245861/wildcard-route-responding-to-all-requests
[12]
https://angular.io/guide/zone
[13]
https://iq.js.org/questions/angular/what-is-the-purpose-of-wildcard-route
[14]
https://community.cloudflare.com/t/wildcard-on-workers-routes/234106
[15]
https://laracasts.com/discuss/channels/laravel/wildcard-route
[16]
https://laracasts.com/discuss/channels/requests/find-named-routes-with-wildcard
[17]
https://hoc247.net/hoi-dap/tin-hoc-10/mo-ta-tam-quan-trong-cua-wildcard-route-trong-angular-8--faq772888.html
Custom elements là một phần của Web Components, một tập hợp các tiêu chuẩn web cho phép tạo ra các thành phần web tùy chỉnh, có thể tái sử dụng, và đóng gói. Chúng cho phép các nhà phát triển định nghĩa các phần tử HTML mới với hành vi và giao diện tùy chỉnh thông qua API JavaScript. Custom elements gần gũi với trình duyệt và không yêu cầu gì hơn ngoài bản gốc của JavaScript, HTML, CSS, nhưng không phải là bản thay thế cho các JavaScript framework điển hình. Các framework hiện đại cho phép thực hiện nhiều thứ hơn là chỉ giả lập hành vi của custom elements, vì vậy chúng có thể cùng hoạt động bên cạnh nhau[1][2][3][4][5][6][7][8].
Citations:
[1]
https://nthung2112.github.io/2019/01/Cach-Javascript-hoat-dong-P19-Ben-trong-custom-element-thu-thuat-xay-dung-component-toi-uu.html
[2]
https://viblo.asia/p/web-component-write-own-elements-why-not-Do754kxWlM6
[3]
https://kungfutech.edu.vn/cau-hoi-phong-van/web-components-la-gi
[4]
https://viblo.asia/p/gioi-thieu-ve-web-components-07LKXxkpKV4
[5]
https://vi.legacy.reactjs.org/docs/web-components.html
[6]
https://topdev.vn/blog/lit-html-la-gi/
[7]
https://baitap365.com/learn-anything/793-tao-custom-element/article
[8]
https://techhay.vn/trong-micro-frontends-tai-sao-custom-elements-server-side-includes-phan-1/
Dynamic components trong Sketchup là những thành phần động cho phép người dùng tạo ra các mô hình 3D có thể tương tác và thay đổi theo các tham số cụ thể. Chúng có thể được cấu hình để thay đổi kích thước, hình dạng, vị trí, và các thuộc tính khác mà không làm thay đổi cấu trúc tổng thể của mô hình. Người dùng có thể thêm các thuộc tính để làm cho các components này "động" - tức là bảo chúng thực hiện một hành động nào đó, như thay đổi kích thước hoặc điều chỉnh vị trí dựa trên các điều kiện nhất định[1][2][3]. Dynamic components cung cấp một cách linh hoạt để tạo ra các mô hình phức tạp có thể dễ dàng điều chỉnh mà không cần phải tạo lại từ đầu.
Citations:
[1]
https://3dshouse.com/vi/sketchup/cach-tao-dynamic-component/
[2]
https://tungduongarch.info/making-dynamic-component/
[3]
https://3dshouse.com/vi/sketchup/dynamic-components-attributes/
[4]
https://www.youtube.com/watch?v=lZPlfIgjIv4
[5]
https://kungfutech.edu.vn/bai-viet/angular/dynamic-component-trong-angular
[6]
https://tddesign.vn/dynamic-component-predefined-attributes/
[7]
https://www.youtube.com/watch?v=9gVBAwLC9GE
[8]
https://tddesign.vn/dynamic-components-sketchup-function/
Custom Elements là một phần của tiêu chuẩn Web Components, cho phép các nhà phát triển tạo ra các thành phần HTML tùy chỉnh với hành vi và kiểu dáng đặc biệt do họ định nghĩa. Cơ chế hoạt động nội bộ của Custom Elements bao gồm một số bước chính sau:
Định nghĩa Custom Element: Đầu tiên, bạn cần định nghĩa
một class cho Custom Element của mình. Class này phải kế thừa từ
HTMLElement. Trong class này, bạn có thể định nghĩa các phương thức,
thuộc tính, và lifecycle callbacks như connectedCallback,
disconnectedCallback,
attributeChangedCallback, v.v.
Đăng ký Custom Element: Sau khi đã định nghĩa class, bạn
cần đăng ký Custom Element với một tên tag duy nhất sử dụng phương thức
customElements.define(). Tên của Custom Element phải chứa
một dấu gạch ngang để tránh xung đột với các tên tag HTML hiện có.
Sử dụng Custom Element: Khi đã đăng ký, bạn có thể sử dụng Custom Element như một thẻ HTML bình thường trong mã HTML của mình. Bạn cũng có thể tạo và thêm Custom Element vào DOM sử dụng JavaScript.
Lifecycle Callbacks: Custom Elements cung cấp các phương
thức callback cho các sự kiện trong vòng đời của một element, cho phép
bạn thực hiện các hành động khi element được thêm vào DOM
(connectedCallback), khi element bị loại bỏ khỏi DOM
(disconnectedCallback), hoặc khi các thuộc tính của element
thay đổi (attributeChangedCallback).
Shadow DOM: Để đóng gói kiểu dáng và cấu trúc của Custom Element, bạn có thể sử dụng Shadow DOM. Shadow DOM cho phép bạn tạo ra một cây DOM riêng biệt, bảo vệ kiểu dáng và nội dung của Custom Element khỏi bị ảnh hưởng bởi CSS và JavaScript bên ngoài.
HTML Templates và Slots: Để tái sử dụng mã HTML, bạn có
thể sử dụng thẻ <template> và
<slot>. <template> chứa đoạn mã
HTML mà bạn muốn tái sử dụng, trong khi <slot> cho
phép bạn định vị nơi nội dung được truyền vào từ bên ngoài có thể được
hiển thị trong template.
Qua các bước trên, Custom Elements cho phép tạo ra các thành phần web độc lập, tái sử dụng được, giúp cải thiện khả năng bảo trì và mở rộng của ứng dụng web.
Citations:
[1]
https://www.innoq.com/en/blog/2023/01/custom-elements-not-for-templating/
[2]
https://polymer-library.polymer-project.org/2.0/docs/devguide/custom-elements
[3]
https://javascript.plainenglish.io/the-complete-web-component-guide-html-templates-a957f1ee43fc?gi=d2abb834d86a
[4]
https://thomaswilburn.github.io/wc-book/ce-lifecycle.html
[5]
https://dev.to/hasanhaja/web-fundamentals-web-components-part-1-3nlh
[6]
https://ultimatecourses.com/blog/lifecycle-hooks-in-web-components
[7]
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
[8]
https://web.dev/learn/html/template
[9]
https://naildrivin5.com/blog/2023/11/19/web-components-custom-elements-lifecycle-is-what-makes-them-useful.html
[10]
https://pwp.stevecassidy.net/javascript/web-components/
[11]
https://aurelia.io/docs/templating/custom-elements/
[12]
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define
[13]
https://polymer-library.polymer-project.org/3.0/docs/devguide/custom-elements
[14]
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements
[15]
https://betterprogramming.pub/how-to-build-a-web-component-with-lit-elements-d88684a46e56
[16]
https://stackoverflow.com/questions/55985745/how-to-use-custom-elements-with-template
[17]
https://github.com/sveltejs/svelte/issues/875
[18]
https://dev.to/joanllenas/web-components-templates-and-shadow-dom-208p
[19]
https://bignerdranch.com/blog/learn-the-lifecycle-of-a-web-component-by-building-a-custom-element/
[20]
https://developer.mozilla.org/en-US/curriculum/core/css-fundamentals/
Để xử lý lỗi trong Observable, bạn có thể sử dụng một số phương pháp sau:
Sử dụng toán tử catchError: Toán tử này cho phép bạn bắt lỗi
xảy ra trong luồng Observable và xử lý chúng. Bạn có thể quyết định là
sẽ trả về một giá trị mặc định, re-throw lỗi hoặc chuyển đổi lỗi thành
một Observable khác[1][2].
Tập trung xử lý lỗi: Thay vì xử lý lỗi riêng lẻ ở mỗi Observable, bạn có thể tạo một dịch vụ xử lý lỗi tập trung để sử dụng chung cho toàn bộ ứng dụng. Điều này giúp quản lý và theo dõi lỗi một cách thống nhất[1].
Cung cấp thông điệp lỗi có ý nghĩa: Khi xử lý lỗi, hãy cung cấp thông điệp lỗi rõ ràng và có ý nghĩa để hỗ trợ việc gỡ lỗi và thông báo cho người dùng. Tránh tiết lộ thông tin nhạy cảm và sử dụng thông điệp lỗi mô tả để hướng dẫn người phát triển và người dùng hiểu về lỗi[1].
Ghi log lỗi: Việc ghi log lỗi là cần thiết để gỡ lỗi và giám sát ứng dụng của bạn. Angular cung cấp cơ chế log và bạn cũng có thể sử dụng các thư viện như ngx-logger để có thêm tính năng log nâng cao[1].
Sử dụng toán tử retry hoặc retryWhen: Đôi khi,
bạn muốn thử lại một hoạt động Observable khi xảy ra lỗi. Toán tử
retry cho phép bạn thực hiện điều này một cách tự động mà
không cần phải tạo lại Observable từ đầu. Toán tử retryWhen
cung cấp khả năng kiểm soát nâng cao hơn, cho phép bạn xác định điều
kiện cụ thể để thử lại[2][3].
Sử dụng toán tử finalize: Toán tử này cho phép bạn thực hiện
một số hành động dọn dẹp hoặc logic khác khi một Observable hoàn thành,
bất kể là do lỗi hay không[2].
Sử dụng toán tử throwError: Đôi khi bạn muốn tạo ra một
Observable mới mà ngay lập tức phát ra một lỗi. Toán tử
throwError cho phép bạn làm điều này[2].
Những phương pháp trên giúp bạn xử lý lỗi một cách linh hoạt và hiệu quả trong quá trình làm việc với Observable trong lập trình phản ứng.
Citations:
[1]
https://www.linkedin.com/pulse/angular-observable-error-handling-best-practices-amr-saafan
[2]
https://blog.angular-university.io/rxjs-error-handling/
[3]
https://www.digitalocean.com/community/tutorials/rxjs-simple-error-handling
[4]
https://dev.to/bhagatparwinder/error-handling-in-observables-280f
[5]
https://www.youtube.com/watch?v=L9kFTps_7Tk
[6]
https://stackoverflow.com/questions/46018259/angular-4-observable-catch-error
[7]
https://www.tiepphan.com/rxjs-reactive-programming/
[8]
https://angular8.hashnode.dev/reactive-programming-trong-rxjs
[9]
https://redux-observable.js.org/docs/recipes/ErrorHandling.html
[10]
https://topdev.vn/blog/6-vi-du-de-ban-yeu-luon-observable/
[11]
https://itnavi.com.vn/blog/observable-hoat-dong-nhu-the-nao-trong-angular
[12]
https://viblo.asia/p/observable-la-gi-cach-tao-ra-observable-bWrZnrRbZxw
[13]
https://viiiprock.com/blog/mot-thoang-observable-649f5140df5a14d29536d97b
[14]
https://fxstudio.dev/rxswift-observables/
[15]
https://viblo.asia/p/callback-promise-async-await-hay-observable-cho-xu-ly-bat-dong-bo-Qpmle7PmKrd
[16]
https://stackoverflow.com/questions/71383765/how-to-handle-error-and-return-observable-while-subscribe-inside-an-observable-f
[17]
https://rxjs.dev/api/operators/catchError
[18]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day024-rxjs-error-handling-conditional.md
[19]
https://viblo.asia/p/rxjs-error-handling-V3m5WjJQlO7
[20]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day019-intro-rxjs-observable.md
Khi bạn cần quyết định giữa việc sử dụng file mẫu Inline hay External, bạn cần xem xét mục tiêu và yêu cầu cụ thể của dự án web của mình. File mẫu Inline CSS được viết trực tiếp trong các thẻ HTML bằng cách sử dụng thuộc tính "style". Phương pháp này thường được sử dụng khi bạn muốn áp dụng các style cụ thể cho một phần tử đơn lẻ và không muốn style đó ảnh hưởng đến các phần tử khác trên trang web của bạn[1][2][3].
Ngược lại, file mẫu External CSS là file riêng biệt với phần mở rộng là .css, được liên kết với tài liệu HTML thông qua thẻ <link> trong phần <head> của tài liệu. Phương pháp này giúp quản lý và duy trì các style cho toàn bộ trang web một cách dễ dàng hơn, đồng thời giúp tải trang nhanh hơn và làm cho mã nguồn trở nên gọn gàng và dễ bảo trì hơn[1][2][3].
Nếu bạn muốn thay đổi style cho toàn bộ trang web hoặc nhiều trang, hoặc muốn tối ưu hóa việc tải trang và bảo trì mã nguồn, thì nên chọn External CSS. Nếu bạn chỉ cần thay đổi style cho một số phần tử cụ thể và không quan tâm đến việc tái sử dụng các style đó, thì Inline CSS có thể là lựa chọn phù hợp[1][2][3].
Citations:
[1]
https://taivublog.com/2016/03/24/bai-1-2-css-co-ban/
[2]
https://www.hostinger.vn/huong-dan/khac-biet-giua-inline-external-va-internal-style-css
[3]
https://bkhost.vn/blog/tim-hieu-inline-external-va-internal-style-css/
[4]
https://funix.edu.vn/chia-se-kien-thuc/muc-do-uu-tien-khi-ap-dung-nhieu-css/
[5]
https://vpsgiare.info/nhung-diem-khac-biet-giua-inline-internal-va-external-khi-style-css/
[6]
https://kiencang.net/noi-tuyen-cac-css-nho/
[7]
https://viblo.asia/p/su-khac-nhau-giua-functional-css-va-inline-css-bWrZnxXn5xw
[8]
https://www.slideshare.net/lechuong315/bo-co-thc-tp-athena-33031402
Multicasting là một phương thức truyền tải dữ liệu trong mạng máy tính, nơi mà dữ liệu được gửi từ một nguồn đến nhiều điểm nhận cụ thể. Điều này cho phép dữ liệu như âm thanh, video hoặc hình ảnh được phân phối đồng thời tới một nhóm các máy thu mà không cần phải gửi từng bản sao riêng lẻ cho mỗi máy thu, giúp tiết kiệm băng thông và tài nguyên mạng[1][2][3][4][5][6].
Citations:
[1]
https://lanit.com.vn/multicast-la-gi.html
[2]
https://vietnix.vn/multicast-la-gi/
[3]
https://kb.pavietnam.vn/multicast-va-2-cach-su-dung-chinh.html/amp
[4]
https://bkhost.vn/blog/multicast/
[5]
https://samtech.vn/cong-nghe-multicasting-la-gi
[6]
https://vi.wikipedia.org/wiki/Multicast
[7]
https://vinahost.vn/multicast-la-gi/
[8]
https://vnpro.vn/thu-vien/chuong-19-co-che-multicast-phan-1-3447.html
Trong Angular, cả constructor và ngOnInit đều là những phần quan trọng của vòng đời component, nhưng chúng có những mục đích sử dụng khác nhau. Constructor là phương thức đặc biệt tự động được gọi khi một thể hiện của lớp được tạo ra. Nó thường được sử dụng để khởi tạo các thuộc tính của lớp và thực hiện bất kỳ thiết lập cần thiết nào khác. Trong Angular, constructor thường được sử dụng để tiêm các phụ thuộc, như dịch vụ hoặc các thành phần khác, vào một thành phần[1][2][3][4][5][6][7][8].
Ngược lại, ngOnInit là một móc vòng đời (lifecycle hook) trong Angular được gọi sau khi constructor được gọi và sau khi các thuộc tính đầu vào của component đã được thiết lập. Phương thức này được sử dụng để thực hiện bất kỳ khởi tạo bổ sung nào cần đến các thuộc tính đã được Angular khởi tạo, bao gồm các thuộc tính được truyền vào thông qua data binding[1][2][3][4][5][6][7][8].
Một số lý do chính để sử dụng ngOnInit thay vì constructor bao gồm:
Khả năng truy cập các thuộc tính đầu vào: ngOnInit đảm bảo rằng các thuộc tính đầu vào của component đã sẵn sàng và có thể được sử dụng để khởi tạo logic của component. Trong khi đó, constructor có thể không có quyền truy cập đầy đủ vào các thuộc tính này vì chúng chưa được Angular thiết lập hoàn toàn[1][2][3][4][5][6][7][8].
Thực hiện các hoạt động liên quan đến DOM: Vì ngOnInit được gọi sau khi Angular thiết lập xong cấu trúc DOM của component, nên nó là thời điểm thích hợp để tương tác với DOM hoặc thực hiện các hoạt động liên quan đến view của component[1][2][3][4][5][6][7][8].
Tối ưu hóa việc kiểm thử: Việc giữ cho constructor mỏng nhẹ và chuyển hầu hết logic khởi tạo vào ngOnInit có thể làm cho việc kiểm thử các component trở nên dễ dàng hơn[13].
Tuân theo quy ước và tăng khả năng đọc code: Sử dụng ngOnInit để khởi tạo logic của component là một quy ước trong cộng đồng Angular và giúp làm cho code dễ đọc và dễ bảo trì hơn[13].
Như vậy, mặc dù constructor có thể được sử dụng để khởi tạo các thành phần, việc sử dụng ngOnInit là cách tiếp cận được khuyến nghị để đảm bảo rằng tất cả các thuộc tính đầu vào và cấu trúc DOM đã sẵn sàng trước khi thực hiện logic khởi tạo của component.
Citations:
[1]
https://www.geeksforgeeks.org/constructor-vs-ngoninit-in-angular/
[2]
https://enlear.academy/why-do-we-use-ngoninit-when-we-have-a-constructor-in-angular-2084f029b59c?gi=0ef689b1c056
[3]
https://www.tutorialspoint.com/difference-between-constructor-and-ngoninit-in-angular-8
[4]
https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit
[5]
https://dev.to/thinkster/what-should-you-put-in-a-constructor-vs-ngoninit-in-angular-3apl
[6]
https://ultimatecourses.com/blog/angular-constructor-ngoninit-lifecycle-hook
[7]
https://kungfutech.edu.vn/cau-hoi-phong-van/giai-thich-cac-vong-doi-trong-angular
[8]
https://www.educative.io/answers/what-is-difference-between-constructor-and-ngoninit-in-angular
[9]
https://viblo.asia/p/lifecycle-hooks-trong-angular-6J3Zgw8qZmB
[10]
https://janeto.gitbook.io/angular-2-co-ban/component-chuyen-sau/su-dung-lifecycle-hooks
[11]
https://levunguyen.com/laptrinhweb/2021/06/29/vong-doi-cua-component-trong-angular/
[12]
https://viblo.asia/p/nhu-the-nao-la-hieu-ve-component-lifecycle-trong-angular-1VgZveyrKAw
[13]
https://www.reddit.com/r/angular/comments/b8jql6/ngoninit_vs_constructor/
[14]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-dependency-injection-trong-angular
[15]
https://www.tiepphan.com/thu-nghiem-voi-angular-dependency-injection-trong-angular/
[16]
https://www.youtube.com/watch?v=APOq7sMTpZU
[17]
https://viblo.asia/p/giao-tiep-giua-cac-component-trong-angular-gAm5yWvDZdb
[18]
https://stackoverflow.com/questions/40233440/why-is-ngoninit-not-the-first-lifecycle-hook
[19]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day007-Component-Interaction-01.md
[20]
https://sec.vnpt.vn/2023/02/angular_trong_phat_trien_ung_dung_web_part_3/
Để xử lý lỗi cho HttpClient trong Angular, bạn có thể sử dụng một số cách sau:
Sử dụng toán tử catchError từ thư viện RxJS để bắt và xử lý
lỗi khi thực hiện các yêu cầu HTTP. Bạn có thể kiểm tra thông tin lỗi
thông qua đối tượng HttpErrorResponse và xử lý tùy theo mã
trạng thái HTTP hoặc loại lỗi cụ thể[1][2][3].
Ví dụ:
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
constructor(private http: HttpClient) {}
getData() {
return this.http.get('/api/data').pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 404) {
// Xử lý lỗi 404 tại đây
} else {
// Xử lý các lỗi khác tại đây
}
return throwError(error);
})
);
}
Sử dụng HttpInterceptor để tạo một lớp trung gian xử lý lỗi
cho tất cả các yêu cầu HTTP đi ra và phản hồi đến từ server.
HttpInterceptor cho phép bạn can thiệp vào quá trình yêu
cầu và phản hồi, từ đó có thể thực hiện xử lý lỗi một cách tập
trung[2][3][4].
Ví dụ:
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
// Xử lý lỗi xác thực tại đây
}
// Xử lý các lỗi khác
return throwError(error);
})
);
}
}
Sử dụng ErrorHandler để xử lý các lỗi không được bắt và xử
lý ở các nơi khác trong ứng dụng của bạn. ErrorHandler là
một lớp mà bạn có thể mở rộng để tạo ra trình xử lý lỗi toàn cục cho ứng
dụng[3][7].
Những cách trên giúp bạn xử lý lỗi một cách linh hoạt và hiệu quả, đồng thời cung cấp thông tin lỗi thân thiện với người dùng và thu thập dữ liệu quan trọng cho quá trình phát triển ứng dụng.
Citations:
[1]
https://reintech.io/blog/how-to-use-the-angular-httpclient-for-handling-errors
[2]
https://javascript.plainenglish.io/handle-errors-in-angular-with-httpclient-and-rxjs-34cf631e29a6?gi=05d01704c23e
[3]
https://rollbar.com/blog/error-handling-with-angular-8-tips-and-best-practices/
[4]
https://stackoverflow.com/questions/46019771/catching-errors-in-angular-httpclient
[5]
https://topdev.vn/blog/su-dung-ung-dung-http-client-cua-angular-v4/
[6]
https://jasonwatmore.com/post/2022/11/08/angular-http-request-error-handling-with-the-httpclient
[7]
https://dev.to/this-is-angular/angular-error-handling-101-553
[8]
https://viblo.asia/p/su-dung-thu-vien-httpclient-de-goi-api-trong-angular-3P0lP3GmZox
[9]
https://levunguyen.com/laptrinhweb/2021/07/15/su-dung-http-client-trong-angular/
[10]
https://angulardive.com/blog/angular-http-requests-a-complete-guide-to-best-practices/
[11]
https://www.tiepphan.com/angular-http-client-module-option/
[12]
https://www.tiepphan.com/angular-http-client-module-introduction/
[13]
https://stackoverflow.com/questions/51120508/httpclient-leading-to-error
[14]
https://github.com/quytm-learning/ng4-http-intro
[15]
https://www.youtube.com/watch?v=B-k7IjiUi34
[16]
https://angular.io/guide/http-handle-request-errors
[17]
https://viblo.asia/p/su-dung-httpclient-trong-angular-thuc-hien-cac-yeu-cau-http-den-cac-api-server-y3RL1n7pVao
Trong Angular, NgModule là một cách để tổ chức và nhóm
các thành phần, directive, pipes, và services mà bạn sử dụng trong ứng dụng của
mình. Có ba thuộc tính chính trong @NgModule decorator mà bạn cần
hiểu: declarations, providers, và
imports.
Declarations: Thuộc tính này được sử dụng để khai báo
các components, directives, và pipes mà thuộc về module hiện tại. Mọi
thứ được khai báo trong declarations sẽ biết đến nhau trong
phạm vi của module đó. Chỉ những directives, components, hoặc pipes được
khai báo hoặc được import từ module khác mới có thể được sử dụng trong
HTML của module đó[1][2].
Providers: Thuộc tính này được sử dụng để khai báo các
services và các giá trị mà cần được biết đến bởi hệ thống dependency
injection của Angular. Các services được thêm vào trong
providers sẽ có phạm vi toàn cục và có thể được tiêm vào
các services hoặc directives khác mà có nhu cầu sử dụng chúng[1][2].
Imports: Thuộc tính này cho phép module hiện tại sử dụng
các declarations được xuất bởi các module khác. Khi bạn import một
module, bạn đang nói với Angular rằng bạn muốn sử dụng các components,
directives, và pipes mà module đó cung cấp trong module của bạn. Điều
này thường được sử dụng để thêm các module hỗ trợ như
FormsModule, RouterModule,
CommonModule, v.v. vào ứng dụng của bạn[1][2].
Một ví dụ về cách sử dụng tất cả ba thuộc tính này trong một
NgModule:
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule, FormsModule],
providers: [UserService],
bootstrap: [AppComponent]
})
export class AppModule { }
Trong ví dụ trên, AppComponent được khai báo trong
declarations vì nó là một component thuộc về module này. Module
BrowserModule, AppRoutingModule,
HttpClientModule, và FormsModule được import để sử
dụng các declarations và services mà chúng cung cấp. Cuối cùng,
UserService được thêm vào providers để có thể được
tiêm vào các components hoặc services khác trong ứng dụng[1].
Citations:
[1]
https://www.geeksforgeeks.org/what-is-the-difference-between-declarations-providers-and-import-in-ngmodule/
[2]
https://stackoverflow.com/questions/39062930/what-is-the-difference-between-declarations-providers-and-import-in-ngmodule
[3]
https://enlabsoftware.com/development/understanding-different-types-of-angular-module-with-practical-examples.html
[4]
https://blog.angular-university.io/angular2-ngmodule/
[5]
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
[6]
https://viblo.asia/p/hieu-ve-angular-modules-ngmodule-va-scope-cua-no-naQZRLJm5vx
[7]
https://topdev.vn/blog/su-dung-ung-dung-http-client-cua-angular-v4/
[8]
https://quantrimang.com/cong-nghe/cach-xay-dung-cac-directive-tuy-chinh-trong-angular-199993
[9]
https://levunguyen.com/cauhoi/2020/06/17/cau-hoi-phong-van-lap-trinh-angular/
[10]
https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes
[11]
https://docs.angular.lat/guide/ngmodule-faq
[12]
https://funix.edu.vn/chia-se-kien-thuc/so-sanh-angular-js-va-react-js/
[13]
https://niithanoi.edu.vn/angular-material-la-gi-cach-cai-dat-va-tao-lap-mot-du-an-angular.html
[14]
https://angular.io/guide/sharing-ngmodules
[15]
https://angular.io/api/core/NgModule
[16]
https://angular.io/guide/providers
Codelyzer là một công cụ mã nguồn mở dựa trên TSLint. Nó được sử dụng để xác thực các dự án Angular TypeScript 3.4 có tuân theo một bộ quy tắc hay không[5]. Mục đích sử dụng Codelyzer là để giúp lập trình viên phát hiện ra các vấn đề về mã nguồn, tuân thủ các quy tắc lập trình và thực hành tốt nhất trong quá trình phát triển ứng dụng Angular. Công cụ này giúp đảm bảo rằng mã nguồn được viết một cách rõ ràng, dễ bảo trì và tuân thủ các tiêu chuẩn của Angular[8].
Citations:
[1]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[2]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-80-%E2%80%93-co-gi-moi-cach-nang-cap-ra-sao-202.html
[3]
https://vntalking.com/angular-day-3-cau-truc-du-an-angular-va-typescript-compilation.html
[4]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[5]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[6]
https://viblo.asia/p/co-gi-moi-trong-angular-11-jvEla736Kkw
[7]
https://topdev.vn/blog/su-dung-ung-dung-http-client-cua-angular-v4/
[8]
https://levunguyen.com/cauhoi/2020/06/17/cau-hoi-phong-van-lap-trinh-angular/
[9]
https://topdev.vn/blog/co-gi-moi-trong-angular-7-0-va-lam-sao-de-nang-cap/
Angular Ivy là tên mã cho hệ thống biên dịch và rendering thế hệ mới của Angular. Từ phiên bản 9 của Angular, Ivy trở thành trình biên dịch và runtime mặc định, thay thế cho View Engine trước đây. Ivy mang lại nhiều cải tiến về hiệu suất, giảm kích thước gói ứng dụng và tăng khả năng tương thích ngược. Nó sử dụng Incremental DOM thay vì Virtual DOM, giúp giảm bớt bộ nhớ cần thiết khi có sự thay đổi trong DOM và cung cấp khả năng tree-shakability, làm cho các ứng dụng Angular trở nên nhẹ nhàng và nhanh chóng hơn[1][2][5][6][7].
Citations:
[1]
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36?gi=a6da80e693cf
[2]
https://www.icantech.vn/kham-pha/angular-la-gi
[3]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[4]
https://niithanoi.edu.vn/tong-quan-ve-angular-tat-ca-dieu-lap-trinh-vien-can-biet-2021.html
[5]
https://docs.angular.lat/guide/ivy
[6]
https://viblo.asia/p/co-gi-moi-trong-angular-phien-ban-9-63vKjzwdK2R
[7]
https://blog.vietnamlab.vn/angular-9-co-gi-moi/
[8]
https://www.youtube.com/watch?v=08Roxt6_pAE
Angular 6 mang lại nhiều tính năng mới và cải tiến so với các phiên bản trước. Dưới đây là một số lý do tại sao bạn nên xem xét việc nâng cấp lên Angular 6:
Hiệu suất và Kích thước Ứng dụng: Angular 6 tập trung vào việc làm cho ứng dụng nhanh hơn và nhẹ hơn. Các cải tiến về hiệu suất bao gồm việc giảm kích thước của các gói ứng dụng và tăng tốc độ biên dịch.
Angular Elements: Angular 6 giới thiệu Angular Elements, cho phép các nhà phát triển đóng gói các thành phần Angular dưới dạng các phần tử web tùy chỉnh, có thể được sử dụng trong các dự án không sử dụng Angular.
RxJS 6: Angular 6 cập nhật lên RxJS 6, mang lại cú pháp nhập mới và đơn giản hơn, cũng như các toán tử có thể sử dụng được trong pipe, giúp tối ưu hóa việc loại bỏ mã không cần thiết và giảm kích thước gói.
Angular CLI: Công cụ dòng lệnh Angular CLI được cải tiến
với các lệnh mới như ng update và ng add, giúp
quá trình nâng cấp và thêm các thư viện mới vào dự án trở nên dễ dàng
hơn.
Hỗ trợ Library: Angular 6 giúp việc tạo và quản lý các thư viện Angular trở nên dễ dàng hơn, điều này thúc đẩy việc chia sẻ và tái sử dụng mã nguồn.
Ivy Renderer: Mặc dù không được phát hành chính thức trong Angular 6, nhưng Ivy Renderer - một động cơ render mới - đã được giới thiệu và hứa hẹn sẽ mang lại nhiều cải tiến về hiệu suất và kích thước ứng dụng trong các phiên bản tiếp theo.
Hỗ trợ PWA: Angular 6 cung cấp các công cụ và cấu hình mạnh mẽ hơn để xây dựng Progressive Web Apps (PWAs), giúp ứng dụng hoạt động mượt mà hơn trên các thiết bị di động.
Cải tiến về Forms và Validation: Các cải tiến về xác thực và quản lý biểu mẫu giúp việc xây dựng và quản lý các biểu mẫu phức tạp trở nên dễ dàng hơn.
Nâng cấp lên Angular 6 không chỉ giúp tận dụng những tính năng mới và cải tiến này mà còn đảm bảo rằng ứng dụng của bạn sẽ tiếp tục nhận được sự hỗ trợ về bảo mật và các bản vá lỗi từ nhóm phát triển Angular.
Citations:
[1]
https://www.intertec.io/blog/pain-of-upgrading-to-angular-6
[2]
https://www.digitalocean.com/community/tutorials/angular-angular-6
[3]
https://jsguru.io/top-10-reasons-to-upgrade-your-angular-application
[4]
https://www.telerik.com/blogs/whats-new-in-angular-6
[5]
https://intellipaat.com/blog/tutorial/angular-6-tutorial/angular-6-feature/
[6]
https://stackoverflow.com/questions/60426610/why-should-i-upgrade-from-angular-6-to-angular-9
[7]
https://tutswiki.com/angular6-features/
[8]
https://developer.okta.com/blog/2018/05/09/upgrade-to-angular-6
[9]
https://www.toptal.com/angular/angular-6-tutorial-new-features-power
[10]
https://www.freecodecamp.org/news/angular-what-is-the-new-briefly-e6837348dd3a/
[11]
https://dzone.com/articles/top-10-features-of-angular-60
[12]
https://www.angularminds.com/blog/whats-new-features-and-improvements-in-angular-6
[13]
https://auth0.com/blog/whats-new-in-angular6/
[14]
https://update.angular.io/?v=6.0-12.0
[15]
https://www.linkedin.com/pulse/things-i-learned-upgrading-angular-6-uday-vunnam
Trong Angular, cả Promise và Observable đều là những công cụ quản lý các hoạt động bất đồng bộ, nhưng chúng có những đặc điểm và cách sử dụng khác nhau.
map,
filter, reduce, và nhiều hơn nữa.Như vậy, việc lựa chọn giữa Promise và Observable phụ thuộc vào nhu cầu cụ thể của ứng dụng và cách bạn muốn xử lý dữ liệu bất đồng bộ trong Angular.
Citations:
[1]
https://stackoverflow.com/questions/37364973/what-is-the-difference-between-promises-and-observables
[2]
https://www.syncfusion.com/blogs/post/angular-promises-vs-observables/amp
[3]
https://quantrimang.com/cong-nghe/su-khac-biet-giua-promise-va-observable-trong-angular-200406
[4]
https://viblo.asia/p/callback-promise-async-await-hay-observable-cho-xu-ly-bat-dong-bo-Qpmle7PmKrd
[5]
https://www.tiepphan.com/rxjs-reactive-programming/
[6]
https://viblo.asia/p/chon-promise-hay-observable-khi-lam-viec-voi-angular-3Q75wXO9KWb
[7]
https://stackoverflow.com/questions/50269671/when-to-use-promise-over-observable
[8]
https://itnavi.com.vn/blog/observable-hoat-dong-nhu-the-nao-trong-angular
[9]
https://www.reddit.com/r/angular/comments/w9ipf4/why_people_still_compare_observables_as_better/
[10]
https://tedu.com.vn/video/angular-2-can-ban-bai-19-khai-niem-ve-observable-va-promise-232.html
[11]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day019-intro-rxjs-observable.md
[12]
https://angular.io/api/common/AsyncPipe
[13]
https://angular.io/guide/comparing-observables
[14]
https://www.youtube.com/watch?v=2NzcRtQuJPY
[15]
https://viblo.asia/p/su-khac-nhau-giua-observable-va-promise-khi-ap-dung-trong-angular-GrLZD7P2Kk0
[16]
https://www.youtube.com/watch?v=_NHcIz38t0c
Protractor là một công cụ được sử dụng để kiểm thử tự động các ứng dụng web, đặc biệt là những ứng dụng được phát triển bằng AngularJS hoặc Angular. Nó chạy trên nền tảng NodeJS và được phát triển cũng như bảo trì bởi Google. Protractor hỗ trợ việc thực hiện kiểm thử từ đầu đến cuối (end-to-end testing) để đảm bảo rằng luồng ứng dụng hoạt động như mong đợi[1][6].
Citations:
[1]
https://viblo.asia/p/end-to-end-e2e-testing-trong-angular-voi-protractor-jasmine-djeZ1PyoKWz
[2]
https://dictionary.cambridge.org/vi/dictionary/english/protractor
[3]
http://tratu.soha.vn/dict/en_vn/Protractor
[4]
https://www.babla.vn/tieng-anh-tieng-viet/protractor
[5]
https://dictionary.cambridge.org/vi/pronunciation/english/protractor
[6]
https://automationfc.vn/khoa-hoc/protractor-for-beginner
[7]
https://www.babla.vn/tieng-anh/protractor
[8]
https://vtudien.com/anh-viet/dictionary/nghia-cua-tu-protractor
Router Outlet trong Angular là một directive (chỉ thị) được sử dụng
để đánh dấu vị trí mà Angular có thể hiển thị các view của các component tương
ứng với các route. Khi một route được kích hoạt, Angular sẽ tải component tương
ứng và hiển thị nội dung của nó tại vị trí mà directive
<router-outlet></router-outlet> được đặt trong template
của ứng dụng. Nói cách khác, <router-outlet> hoạt động như
một placeholder, nơi Angular sẽ đổ nội dung của các component dựa trên cấu hình
routing của ứng dụng[2][3][4][5].
Router Outlet cũng hỗ trợ các sự kiện như activate và
deactivate, cho phép các nhà phát triển thực hiện các hành động cụ
thể khi một component được kích hoạt hoặc hủy bỏ thông qua routing. Điều này
giúp quản lý trạng thái của ứng dụng một cách linh hoạt hơn khi người dùng điều
hướng qua các trang khác nhau trong ứng dụng[2].
Citations:
[1]
https://www.youtube.com/watch?v=j_Rv7nET13g
[2]
https://viblo.asia/p/routeroutlet-trong-angular-GrLZDR2w5k0
[3]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-router-trong-angular
[4]
https://viblo.asia/p/co-ban-ve-router-trong-angular-m68Z04EXZkG
[5]
https://longnv.name.vn/lap-trinh-angular/routing-trong-angular
[6]
https://www.tma.vn/Hoi-dap/Cam-nang-nghe-nghiep/Routing-trong-Angular-co-the-ban-chua-biet/58576
[7]
https://janeto.gitbook.io/angular-2-co-ban/khai-niem-co-ban-ve-dinh-huong-navigation-va-dinh-tuyen-routing/cach-routing-hoat-dong
[8]
https://viettuts.vn/angular7/routing-trong-angular7
Trong Angular, "subscribing" là quá trình đăng ký lắng nghe các giá
trị được phát ra từ một Observable. Observable là một khái niệm cốt lõi trong
Reactive Programming, và Angular sử dụng thư viện RxJS để triển khai mô hình
này. Một Observable có thể phát ra nhiều giá trị theo thời gian, và một
component hoặc dịch vụ trong Angular có thể "subscribe" để lắng nghe những giá
trị này. Khi một giá trị mới được phát ra, hàm được truyền vào phương thức
subscribe sẽ được gọi với giá trị đó[1][2].
Quá trình "subscribing" thường bao gồm việc truyền một object hoặc
một hàm vào phương thức subscribe của Observable. Object này thường
có ba phương thức: next, error, và
complete, tương ứng với ba loại thông báo mà Observable có thể phát
ra: giá trị tiếp theo, một lỗi, và thông báo hoàn thành[1][2].
Một điểm quan trọng khi làm việc với "subscribing" trong Angular là
quản lý việc hủy đăng ký (unsubscribe) một cách cẩn thận để tránh rò rỉ bộ nhớ.
Khi một component bị hủy, cần phải hủy đăng ký tất cả các subscription mà
component đó đã tạo ra. Điều này thường được thực hiện bằng cách gọi phương thức
unsubscribe trên đối tượng Subscription mà phương thức
subscribe trả về[2][4][7].
Ví dụ, nếu một component đăng ký lắng nghe dữ liệu từ một Observable và sau đó component đó bị hủy, nếu không hủy đăng ký, Observable vẫn sẽ tiếp tục phát ra giá trị và cố gắng gọi hàm callback, dẫn đến rò rỉ bộ nhớ vì component không còn tồn tại để xử lý những giá trị đó nữa[2][4][7].
Citations:
[1]
https://www.tiepphan.com/rxjs-reactive-programming/
[2]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-rxjs
[3]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day019-intro-rxjs-observable.md
[4]
https://viblo.asia/p/rxjs-voi-angular-subscribe-va-unsubscribe-observable-Do754kQ0lM6
[5]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day045-angular-observable-subscription-unsubscribe.md
[6]
https://www.youtube.com/watch?v=ytdiiq2cGdE
[7]
https://kungfutech.edu.vn/bai-viet/angular/unsubscribe-mot-subscription
[8]
https://viblo.asia/p/cac-phuong-phap-hay-de-co-mot-ung-dung-angular-sach-va-hieu-qua-jvElay94lkw
Router State là trạng thái của router trong quá trình định tuyến, nó bao gồm thông tin về các đường link và trạng thái của chúng trong mạng. Trong giao thức định tuyến OSPF (Open Shortest Path First), mỗi router sẽ trao đổi thông tin về trạng thái đường link của mình với các router khác trong cùng khu vực (area), từ đó xây dựng nên một cơ sở dữ liệu trạng thái đường link (Link State Database - LSDB) chung cho tất cả các router trong khu vực đó. Dựa vào LSDB, mỗi router sẽ sử dụng giải thuật Dijkstra để tính toán ra cây đường đi ngắn nhất (Shortest Path Tree) và xây dựng bảng định tuyến dựa trên cây này[1][2].
Citations:
[1]
https://www.daihockhonggiay.com/blogs/post/link-state-ospf
[2]
https://www.forum.vnpro.org/forum/ccnp-enterprise/advanced-routing/6402-gi%E1%BB%9Bi-thi%E1%BB%87u-v%E1%BB%81-c%C3%A1c-giao-th%E1%BB%A9c-%C4%91%E1%BB%8Bnh-tuy%E1%BA%BFn
[3]
https://tech.cybozu.vn/phan-biet-cac-loai-state-va-cach-quan-ly-state-trong-ung-dung-react-13211/
[4]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day030-router-guards-resolvers.md
[5]
https://vi.wikipedia.org/wiki/%C4%90%E1%BB%8Bnh_tuy%E1%BA%BFn
[6]
https://vnpro.vn/thu-vien/lua-chon-giao-thuc-dinh-tuyen-trong-mang-phan-2-2385.html
[7]
https://www.thegioididong.com/hoi-dap/router-wifi-la-gi-1116606
[8]
https://gfiblockchain.com/tong-quan-ve-du-an-router-protocol-route.html
Bazel là một công cụ phần mềm mã nguồn mở và miễn phí được sử dụng để tự động hóa việc xây dựng và thử nghiệm phần mềm. Google sử dụng công cụ xây dựng Blaze trong nội bộ và phát hành một cổng nguồn mở của công cụ Blaze với tên Bazel, được đặt tên là một từ ghép của Blaze. Bazel được phát hành lần đầu vào tháng 3 năm 2015 và đã có phiên bản ổn định 7.0.2 vào ngày 25 tháng 1 năm 2024[2].
Bazel hỗ trợ xây dựng và thử nghiệm phần mềm bằng cách sử dụng các quy tắc, được viết bằng ngôn ngữ lập trình Starlark, một biến thể của Python. Công cụ này có các quy tắc tích hợp cho việc xây dựng phần mềm viết bằng nhiều ngôn ngữ khác nhau như Java, Kotlin, Scala, C, C++, Go, Python, Rust, JavaScript, Objective-C và các kịch bản bash. Bazel cũng có thể tạo ra các gói ứng dụng phần mềm phù hợp cho việc triển khai trên các hệ điều hành Android và iOS[2].
Một trong những mục tiêu của Bazel là thiết lập một hệ thống xây dựng mà trong đó các đầu vào và đầu ra của các mục tiêu xây dựng được xác định một cách chính xác, đảm bảo kiến thức chính xác trong hệ thống xây dựng. Điều này cho phép phân tích chính xác hơn và xác định các thành phần xây dựng lỗi thời trong hệ thống phụ thuộc. Việc phân tích đồ thị phụ thuộc một cách xác định hơn dẫn đến việc cải thiện thời gian xây dựng bằng cách tránh xây dựng lại những gì không cần thiết. Độ tin cậy của việc xây dựng được cải thiện bằng cách tránh lỗi nơi các mục tiêu xây dựng có thể phụ thuộc vào các thành phần đầu vào lỗi thời. Bazel sử dụng băm nội dung thay vì dấu thời gian dựa trên tệp, điều này giúp tránh vấn đề với đồng bộ hóa đồng hồ khi xây dựng được phân phối trên nhiều máy chủ[2].
Bazel cũng được thiết kế để mở rộng và hỗ trợ xây dựng phân tán và song song trên cơ sở hạ tầng đám mây từ xa. Nó có thể xử lý các kho mã nguồn lớn, dù là trong nhiều kho lưu trữ hoặc một monorepo khổng lồ[1].
Citations:
[1]
https://bazel.build
[2]
https://en.wikipedia.org/wiki/Bazel_%28software%29
[3]
https://topdev.vn/blog/bazel-4-1-0-bai-1-cai-dat-bazel-4-1-0/
[4]
https://topdev.vn/blog/bazel-4-1-0-bai-2-khai-niem-va-thuat-ngu/
[5]
https://www.linuxadictos.com/vi/android-chuy%E1%BB%83n-sang-h%E1%BB%87-th%E1%BB%91ng-x%C3%A2y-d%E1%BB%B1ng-bazel.html
[6]
https://www.cet.edu.vn/basil-la-gi
[7]
https://itzone.com.vn/vi/article/google-gioi-thieu-phien-ban-dung-thu-cua-phan-mem-xay-dung-va-kiem-thu-bazel-795/
[8]
https://www.babla.vn/ph%C3%A1t-%C3%A2m/tieng-ha-lan/bazel
Angular Universal là một công nghệ cho phép render các ứng dụng Angular phía server, thay vì hoàn toàn trên trình duyệt của người dùng. Điều này mang lại nhiều lợi ích như cải thiện hiệu suất tải trang, trải nghiệm người dùng tốt hơn và đặc biệt là tối ưu hóa cho công cụ tìm kiếm (SEO). Angular Universal hoạt động như một middleware giữa Node.js và Angular, kết hợp những điểm mạnh của cả hai để tạo ra trải nghiệm người dùng tốt nhất có thể[1].
Cụ thể, Angular Universal cho phép ứng dụng Angular của bạn được render trước trên server, sau đó gửi HTML đến trình duyệt để hiển thị, thay vì phải chờ đợi mã JavaScript được tải và thực thi trên trình duyệt. Điều này giúp giảm đáng kể thời gian tải trang, đặc biệt là với những người dùng có kết nối internet chậm hoặc thiết bị có hiệu suất thấp[1][2].
Ngoài ra, việc render trang web trên server còn giúp cải thiện khả năng tương thích với các công cụ tìm kiếm, vì các bot tìm kiếm có thể dễ dàng thu thập nội dung từ HTML tĩnh mà không cần phải thực thi JavaScript. Điều này rất quan trọng đối với SEO, vì nó giúp nội dung của bạn dễ dàng được index và xếp hạng trên các công cụ tìm kiếm[1][2].
Để bắt đầu với Angular Universal, bạn có thể clone từ repository @ng-seed/universal, một dự án mẫu giới thiệu cách sử dụng Angular Universal và các best practices liên quan. Dự án này sử dụng Node.js và Express để tạo một ứng dụng đơn giản, giúp bạn hiểu rõ hơn về cách cấu hình và triển khai ứng dụng Angular Universal[1].
Citations:
[1]
https://viblo.asia/p/server-side-rendering-voi-angular-4-angular-universal-Do754WX4lM6
[2]
https://jamstackvietnam.com/en/blog/jamstack-universe/ket-hop-ssr-voi-csr-trong-single-page-app
[3]
https://tanca.io/blog/bo-cau-hoi-phong-van-angular-duoc-dung-nhieu-nhat
[4]
https://glints.com/vn/blog/cau-hoi-phong-van-angular-va-cach-tra-loi/
[5]
https://angular.io/guide/ssr
[6]
https://www.youtube.com/watch?v=fWf1DNgi76I
[7]
https://viblo.asia/p/tao-website-kiet-xuat-phia-may-chu-server-side-rendering-voi-angular-universal-YWOZrGJNlQ0
[8]
https://seouytin.com/seo/nhung-dieu-ban-can-biet-cho-seo-khi-su-dung-angular.html
Trong lập trình, đặc biệt là khi làm việc với Angular, "spy" không phải là gián điệp theo nghĩa thông thường mà là một kỹ thuật trong việc viết unit test. "Spy" được sử dụng để theo dõi các chức năng - tức là giám sát các hàm được gọi, các đối số được truyền vào, và giá trị trả về của chúng - mà không thực sự thực hiện logic bên trong hàm đó. Điều này rất hữu ích khi bạn muốn kiểm tra một phần của mã mà không muốn phụ thuộc vào các phần khác hoặc khi bạn muốn kiểm soát chặt chẽ môi trường thực thi của mã.
Trong Angular, bạn có thể sử dụng spy để kiểm tra các dịch vụ, ví
dụ như khi bạn có một dịch vụ dữ liệu sử dụng HttpClient. Bạn có
thể tạo một spy cho HttpClient để giả lập các phản hồi từ server mà
không cần phải thực sự gửi một yêu cầu HTTP, giúp cho việc kiểm tra trở nên
nhanh chóng và không phụ thuộc vào các yếu tố bên ngoài như tình trạng của
server hay kết nối mạng[1][4].
Citations:
[1]
https://angular.io/guide/testing-services
[2]
https://www.academia.edu/30475777/%C4%90%E1%BB%81_TA_THPT_gi%E1%BA%A3i_chi_ti%E1%BA%BFt_
[3]
https://viblo.asia/p/dung-atspy-anotation-lam-gian-diep-khi-viet-unit-test-GrLZDazBlk0
[4]
https://viblo.asia/p/angular-viet-unit-test-voi-mock-va-spy-maGK78maZj2
[5]
https://www.babla.vn/tieng-anh-tieng-viet/spy
DOM Tăng dần (Incremental DOM) có dấu chân bộ nhớ thấp vì nó không tạo ra một bản sao hoàn chỉnh của DOM thực tế mỗi khi cần tái hiển thị giao diện người dùng. Thay vào đó, nó sử dụng DOM thực tế để theo dõi sự thay đổi và chỉ cấp phát bộ nhớ khi có sự thêm hoặc bỏ đi các nút DOM. Kích thước của việc cấp phát bộ nhớ này tỷ lệ thuận với kích thước của sự thay đổi trong DOM. Điều này có nghĩa là, nếu không có sự thay đổi nào trong DOM, Incremental DOM sẽ không yêu cầu bất kỳ bộ nhớ nào để tái hiển thị giao diện, dẫn đến việc tiết kiệm đáng kể bộ nhớ[1][2][3].
Ngoài ra, Incremental DOM còn có khả năng "tree shaking", tức là loại bỏ những mã không sử dụng trong quá trình biên dịch, giúp giảm kích thước của gói tài nguyên được gửi đến trình duyệt. Điều này không thể thực hiện được với Virtual DOM vì nó yêu cầu một trình thông dịch, và không thể biết được phần nào của trình thông dịch là cần thiết hoặc không cần thiết tại thời điểm biên dịch[1][2][3].
Những đặc điểm này làm cho Incremental DOM trở thành một lựa chọn tốt cho các ứng dụng di động, nơi mà bộ nhớ và hiệu suất là những yếu tố quan trọng cần được tối ưu hóa[1][2][3].
Citations:
[1]
https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca?gi=61db2a3b4b0f
[2]
https://www.linkedin.com/pulse/incremental-dom-virtual-angular-ivy-akhil-kumar
[3]
https://tudip.com/blog-post/understanding-incremental-dom-and-virtual-dom/
[4]
https://borstch.com/blog/incremental-and-virtual-dom-reactjs-angular-vuejs
[5]
https://auth0.com/blog/incremental-dom/
[6]
https://nicotsou.com/dom-issues/
[7]
https://www.fullstack.cafe/angular/why-incremental-dom-has-low-memory-footprint/1000
Khi bạn sử dụng thẻ <script> bên trong một
template, mã JavaScript bên trong thẻ <script> sẽ được trình
duyệt tải và thực thi. Điều này có nghĩa là các hàm, biến, hoặc bất kỳ đoạn mã
JavaScript nào được đặt trong thẻ <script> sẽ được xử lý và
chạy như một phần của trang web khi trang được tải hoặc khi sự kiện cụ thể nào
đó được kích hoạt[1].
Tuy nhiên, cách sử dụng thẻ <script> có thể khác
nhau tùy thuộc vào loại template bạn đang làm việc. Ví dụ, trong một số template
engine như Thymeleaf, bạn có thể cần phải sử dụng các thuộc tính đặc biệt hoặc
cú pháp để chèn mã JavaScript một cách an toàn và không làm vỡ cấu trúc của
template[2].
Trong khi đó, với các framework như Vue.js, bạn có thể cần phải tuân theo các
quy tắc cụ thể về cách viết và tổ chức mã JavaScript trong các thành phần của
Vue[3].
Nếu bạn đang làm việc với HTML thông thường, việc sử dụng thẻ
<script> là một phương pháp phổ biến để nhúng hoặc liên kết
đến các tệp JavaScript ngoại vi. Điều này cho phép bạn tách biệt mã JavaScript
khỏi mã HTML, giúp mã nguồn dễ quản lý và bảo trì hơn[1][4].
Cần lưu ý rằng việc sử dụng thẻ <script> trong
các template cần được thực hiện một cách cẩn thận để tránh các vấn đề về bảo mật
như tấn công Cross-Site Scripting (XSS) và để đảm bảo rằng mã JavaScript không
ảnh hưởng đến hiệu suất trang web.
Citations:
[1]
https://cloud.z.com/vn/news/javascript/
[2]
https://techmaster.vn/posts/36647/lap-trinh-thymeleaf-view-template-cho-spring-boot-web-app
[3]
https://vi.vuejs.org/v2/style-guide/
[4]
https://tenten.vn/tin-tuc/the-html/
[5]
https://viblo.asia/p/tim-hieu-ve-template-literals-trong-javascript-XL6lA9MDlek
[6]
https://www.topwebviet.com/huong-dan-html-noi-dung-sieu-du-lieu.html
[7]
https://viblo.asia/p/tim-hieu-ve-x-template-trong-jquery-EoDGQOMRkbV
[8]
https://pridio.com/kien-thuc/website-marketing/cau-truc-theme-wordpress/
Redux là một thư viện JavaScript mã nguồn mở dùng để quản lý và tập trung trạng thái ứng dụng. Nó thường được sử dụng cùng với các thư viện như React hoặc Angular để xây dựng giao diện người dùng. Redux tương tự như kiến trúc Flux của Facebook, được tạo ra bởi Dan Abramov và Andrew Clark[15]. Redux là một thư viện nhỏ với API đơn giản, được thiết kế để làm một container dự đoán được cho trạng thái ứng dụng. Nó hoạt động giống như một hàm giảm (reducing function), một khái niệm trong lập trình hàm[15].
Trong mối quan hệ với một ứng dụng Angular, Redux có thể được sử dụng để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng hơn. Mặc dù Angular có cơ chế quản lý trạng thái riêng thông qua các dịch vụ và RxJS, việc sử dụng Redux trong một ứng dụng Angular giúp tạo ra một nguồn sự thật duy nhất cho trạng thái ứng dụng, làm cho trạng thái ứng dụng trở nên dễ dàng quản lý và dự đoán hơn, đặc biệt là trong các ứng dụng lớn và phức tạp[3][4][10][14]. Redux giúp tách biệt rõ ràng giữa logic ứng dụng và giao diện người dùng, giúp mã nguồn dễ bảo trì và mở rộng hơn.
NgRx, một thư viện tương tự Redux nhưng được tối ưu cho Angular, thực hiện mô hình quản lý trạng thái dựa trên Redux và RxJS, mang lại lợi ích của Redux cho các ứng dụng Angular một cách mạnh mẽ[3][7]. NgRx cung cấp một cách tiếp cận tập trung để quản lý trạng thái và tác động bên trong ứng dụng Angular, giúp xử lý các tác vụ bất đồng bộ và chia sẻ dữ liệu giữa các thành phần một cách hiệu quả.
Citations:
[1]
https://tenten.vn/tin-tuc/redux-la-gi/
[2]
https://200lab.io/blog/redux-la-gi/
[3]
https://www.reddit.com/r/Angular2/comments/145fnr7/ngrxredux_what_is_it_for_when_to_use/
[4]
https://thanhle.blog/blog/state-trong-frontend-la-gi-tai-sao-nen-gioi-cai-nay
[5]
https://www.reddit.com/r/angular/comments/kgvygu/can_someone_explain_to_me_why_we_need_redux_in_an/
[6]
https://stackoverflow.com/questions/59287964/why-should-i-use-redux-in-angular-as-far-as-angular-is-two-way-data-binding
[7]
https://viblo.asia/p/ngrx-la-gi-thu-nghiem-voi-ngrx-trong-ung-dung-angular-phan-1-djeZ1pVjKWz
[8]
https://viblo.asia/p/redux-co-ban-m68Z00JdZkG
[9]
https://www.youtube.com/watch?v=Sq_Qt8PWf_Y
[10]
https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/
[11]
https://cloud.z.com/vn/news/redux/
[12]
https://topdev.vn/blog/redux-la-gi/
[13]
https://codeaholicguy.com/2016/08/16/hoc-reactredux-qua-vi-du-thuc-te-redux/
[14]
https://dev.to/integerman/early-thoughts-on-angular-with-redux-ngrx-kj3
[15]
https://en.wikipedia.org/wiki/Redux_%28JavaScript_library%29
[16]
https://vietnix.vn/redux-la-gi/
[17]
https://stringee.com/vi/blog/post/redux-la-gi
[18]
https://aptech.fpt.edu.vn/redux-la-gi.html
[19]
https://viblo.asia/p/tim-hieu-redux-qua-vi-du-thuc-te-gAm5yaNO5db
AOT có thể được hiểu là viết tắt của nhiều khái niệm khác nhau tùy thuộc vào ngữ cảnh. Trong lĩnh vực lập trình và công nghệ thông tin, AOT thường được hiểu là "Ahead-of-Time compilation" - một kỹ thuật biên dịch mã nguồn hoặc mã trung gian thành mã máy trực tiếp trước khi chương trình được thực thi. AOT giúp cải thiện hiệu suất và giảm thiểu thời gian khởi động của các ứng dụng bằng cách biên dịch mã nguồn trước khi chương trình chạy, thay vì biên dịch "Just-In-Time" (JIT) trong quá trình thực thi[1][4].
Trong ngữ cảnh của Angular, một framework phát triển ứng dụng web, AOT cũng đề cập đến quá trình biên dịch trước các template và component của ứng dụng, giúp tăng tốc độ khởi chạy ứng dụng và cải thiện hiệu suất bằng cách giảm thiểu lượng công việc cần thực hiện tại thời điểm chạy ứng dụng[4].
Ngoài ra, AOT cũng được sử dụng trong Flutter, một framework phát triển ứng dụng di động và web của Google, với mục đích tương tự là tăng tốc độ khởi chạy ứng dụng và cải thiện hiệu suất bằng cách biên dịch trước mã nguồn[7].
Tóm lại, AOT là một kỹ thuật biên dịch trước được sử dụng trong nhiều ngữ cảnh khác nhau của lập trình và phát triển phần mềm, nhằm mục đích tối ưu hóa hiệu suất và thời gian khởi động của ứng dụng.
Citations:
[1]
https://vncometech.com/bai-viet/so-sanh-jit-va-aot
[2]
https://pops.vn/blog/titan-thuy-to/
[3]
https://vi.wikipedia.org/wiki/%C4%90%E1%BA%A1i_chi%E1%BA%BFn_Titan
[4]
https://kungfutech.edu.vn/cau-hoi-phong-van/aot-la-gi-va-neu-uu-diem-cua-no
[5]
https://www.abbreviationfinder.org/vi/acronyms/aot.html
[6]
https://vnreview.vn/thread/thuat-toan-suy-nghi-aot-la-gi-phuong-phap-dao-tao-ai-giong-con-nguoi-cua-microsoft.562949953761356
[7]
https://vncometech.com/bai-viet/tim-hieu-aot-va-jut-flutter
[8]
https://sotaydoanhtri.com/thuat-ngu/assignment-of-trade-aot-41831/
Promise và Observable là hai cơ chế xử lý bất đồng bộ trong Angular, nhưng chúng có một số điểm khác biệt cơ bản:
Promise:
.then() và .catch() được
sử dụng để xử lý kết quả hoặc lỗi từ Promise.Observable:
Khi nào sử dụng Promise và Observable?
Sử dụng Promise khi:
Sử dụng Observable khi:
Trong thực tế, lựa chọn giữa Promise và Observable phụ thuộc vào nhu cầu cụ thể của ứng dụng và sự phức tạp của các hoạt động bất đồng bộ mà bạn cần xử lý.
RxJS cung cấp một loạt các hàm tiện ích (utility functions) giúp lập trình viên quản lý và thao tác với luồng dữ liệu (streams) một cách hiệu quả. Một số hàm tiện ích nổi bật bao gồm:
tap(): Cho phép thực hiện các tác vụ như logging,
debugging mà không làm thay đổi luồng dữ liệu. Hàm này nhận vào một
Observer hoặc ba hàm là nextFunction, errorFunction, và
completeFunction. tap() không trả về giá trị gì và không
làm thay đổi luồng dữ liệu, giúp nó trở thành công cụ hữu ích cho việc
debug và log giá trị[4].
groupBy(): Phân loại các giá trị trong luồng dữ liệu dựa
trên một tiêu chí nhất định. Mặc dù không được sử dụng rộng rãi và không
được đề cập chi tiết trong các nguồn, nhưng groupBy() là
một hàm tiện ích giúp tổ chức dữ liệu theo nhóm[4].
mergeScan(): Là một hàm tiện ích khác được nhắc đến
nhưng không được giải thích chi tiết. mergeScan() có thể
được sử dụng để kết hợp giá trị từ nhiều luồng dữ liệu[4].
Những hàm tiện ích này, cùng với nhiều hàm khác, làm cho RxJS trở thành một công cụ mạnh mẽ cho việc xử lý và quản lý dữ liệu bất đồng bộ trong các ứng dụng web.
Citations:
[1]
https://ehkoo.com/bai-viet/lam-quen-voi-mithriljs-phan-1/
[2]
https://codegym.vn/blog/unit-testing-trong-angular/
[3]
https://hackernoon.com/vi/th%E1%BB%AD-nghi%E1%BB%87m-m%E1%BB%99t-ki%E1%BA%BFn-tr%C3%BAc-s%E1%BA%A1ch-trong-m%E1%BB%99t-%E1%BB%A9ng-d%E1%BB%A5ng-giao-di%E1%BB%87n-ng%C6%B0%E1%BB%9Di-d%C3%B9ng-c%C3%B3-h%E1%BB%A3p-l%C3%BD-kh%C3%B4ng
[4]
https://kungfutech.edu.vn/bai-viet/angular/rxjs-higher-order-observables-ultility
[5]
https://niithanoi.edu.vn/tong-quan-ve-angular-tat-ca-dieu-lap-trinh-vien-can-biet-2021.html
[6]
https://viblo.asia/p/advanced-caching-with-rxjs-Ljy5Ve9Glra
[7]
https://viblo.asia/p/chinh-phuc-rxdart-flutter-trong-3-not-nhac-not-cuoi-cung-rxdart-khong-dang-so-nhu-ban-nghi-bWrZn0qp5xw
[8]
https://websitehcm.com/event-loop-trong-javascript-la-gi/
Constructor và ngOnInit là hai phương thức quan trọng trong vòng đời của một component trong Angular, mỗi phương thức đều có mục đích và thời điểm sử dụng riêng biệt.
Constructor là phương thức đầu tiên được thực thi khi một instance của class được tạo ra. Nó thường được sử dụng để khởi tạo các biến instance và tiêm các dependency cần thiết cho component thông qua Dependency Injection (DI) của Angular. Constructor không nên chứa logic nặng hoặc các thao tác liên quan đến DOM vì lúc này component chưa được khởi tạo hoàn chỉnh[2][4].
Ví dụ về việc sử dụng constructor để tiêm dependency:
@Injectable()
class Computer {
constructor(public cpu: CPU) {}
}
Trong ví dụ trên, CPU là một dependency được tiêm vào
class Computer thông qua constructor[1].
ngOnInit là một lifecycle hook được gọi sau khi Angular thực hiện xong việc xây dựng component, bao gồm việc thiết lập các input properties. Phương thức này thường được sử dụng để thực hiện các khởi tạo logic hoặc gọi dữ liệu từ server, vì lúc này component đã sẵn sàng để làm việc với các dữ liệu đầu vào và các view child[2][4].
Ví dụ về việc sử dụng ngOnInit để khởi tạo logic:
@Component({
selector: 'app-example',
template: '<p>{{data}}</p>'
})
export class ExampleComponent implements OnInit {
data: string;
ngOnInit() {
// Logic khởi tạo hoặc gọi dữ liệu
}
}
Trong ví dụ trên, ngOnInit được sử dụng để thực hiện
các khởi tạo sau khi component được tạo ra[4].
@ViewChild hoặc
@ContentChild[4].Như vậy, mặc dù cả hai đều là phần của vòng đời component, nhưng chúng có những vai trò và thời điểm sử dụng khác nhau, phù hợp với các nhu cầu cụ thể trong quá trình phát triển ứng dụng Angular.
Citations:
[1]
https://www.tiepphan.com/thu-nghiem-voi-angular-dependency-injection-trong-angular/
[2]
https://viblo.asia/p/nhu-the-nao-la-hieu-ve-component-lifecycle-trong-angular-1VgZveyrKAw
[3]
https://levunguyen.com/laptrinhweb/2021/06/29/vong-doi-cua-component-trong-angular/
[4]
https://www.geeksforgeeks.org/constructor-vs-ngoninit-in-angular/
[5]
https://blog.neoscorp.vn/giao-tiep-giua-cac-components-trong-angular/
[6]
https://stackoverflow.com/questions/55591872/what-is-difference-between-constructor-and-ngoninit
[7]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day007-Component-Interaction-01.md
[8]
https://sec.vnpt.vn/2023/02/angular_trong_phat_trien_ung_dung_web_part_3/
Activated route trong Angular là một khái niệm liên quan đến việc điều hướng và quản lý các tuyến đường (routes) trong ứng dụng. Khi một tuyến đường được kích hoạt, Angular sẽ tải và hiển thị component tương ứng với tuyến đường đó. Activated route chứa thông tin về đường dẫn (path) hiện tại, các tham số truy vấn (query parameters), và các đoạn (fragments) của URL. Nó cung cấp các dịch vụ và giá trị cần thiết để tương tác với tuyến đường đã kích hoạt, bao gồm cả việc truy cập vào dữ liệu động từ URL.
Trong Angular, ActivatedRoute là một dịch vụ được cung
cấp bởi RouterModule, cho phép các developers truy cập vào thông
tin về tuyến đường hiện tại, bao gồm các tham số, dữ liệu tuyến đường (route
data), và trạng thái của tuyến đường. Điều này giúp cho việc xây dựng các ứng
dụng đơn trang (SPA) trở nên linh hoạt và mạnh mẽ hơn, bằng cách cho phép các
components tương tác với đường dẫn và truy cập dữ liệu cần thiết một cách dễ
dàng[1][2][3][4].
Citations:
[1]
https://kungfutech.edu.vn/bai-viet/angular/guards-and-resolved-phan-1
[2]
https://viblo.asia/p/co-ban-ve-router-trong-angular-2-63vKjn7yK2R
[3]
https://viblo.asia/p/react-router-dom-v6-maGK7BQB5j2
[4]
https://www.tma.vn/Hoi-dap/Cam-nang-nghe-nghiep/Routing-trong-Angular-co-the-ban-chua-biet/58576
[5]
https://funix.edu.vn/chia-se-kien-thuc/cach-dinh-cau-hinh-dia-chi-ip-tinh-tren-ubuntu-22-04-lts/
[6]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day030-router-guards-resolvers.md
[7]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day048-using-dependency-injection-to-get-data-from-activated-route.md
[8]
https://tapchicongthuong.vn/bai-viet/ung-dung-phuong-phap-dap-ung-be-mat-rsm-de-toi-uu-hoa-kha-nang-loai-bo-thuoc-nhuom-congo-red-su-dung-vat-lieu-nano-tu-tinh-graphene-oxide-mnfe2o4-49477.htm
Pipe có tham số (Parameterized pipe) trong Angular là một phần của framework Angular, cho phép chúng ta truyền một hoặc nhiều tham số vào hàm pipe để có thể sử dụng chúng nhằm biến đổi dữ liệu đầu vào một cách cụ thể dựa trên điều kiện hoặc đầu vào của người dùng. Các tham số này được truyền vào hàm pipe như là đối số, giúp cho việc biến đổi dữ liệu trở nên linh hoạt hơn[1][2][3].
Angular cung cấp sẵn một số pipes có tham số như DatePipe, CurrencyPipe, LowerCasePipe, v.v., và bạn cũng có thể tạo ra các custom pipes có tham số của riêng mình để đáp ứng các nhu cầu cụ thể không được các built-in pipes hỗ trợ[1][2][3].
Ví dụ về cách sử dụng pipe có tham số trong Angular:
<!-- Sử dụng CurrencyPipe để định dạng tiền tệ -->
<p>Fare: {{ fare | currency: 'INR' }}</p>
Trong ví dụ trên, currency là tên của pipe và
'INR' là giá trị của tham số được truyền vào, chỉ định loại tiền tệ
cần định dạng[1].
Cú pháp chung để truyền tham số cho pipe trong Angular là:
{{ interpolated_value | pipe_name:parameter1:parameter2:...:parameterN }}
Bạn có thể truyền vào số lượng tham số không giới hạn, và các tham
số này được phân tách bởi dấu hai chấm :[2][3].
Citations:
[1]
https://www.geeksforgeeks.org/what-is-a-parameterized-pipe/
[2]
https://caodang.fpt.edu.vn/tin-tuc-poly/ha-noi-tin-sinh-vien/pipes-la-gi-cach-chuyen-doi-du-lieu-nhan-duoc-tu-api.html
[3]
https://kungfutech.edu.vn/bai-viet/angular/pipes-trong-angular
[4]
https://phamdinhkhanh.github.io/deepai-book/ch_appendix/appendix_pipeline.html
[5]
https://www.phongvanit.com/ky-nang/angular-1016
[6]
https://viblo.asia/p/pipe-la-gi-cach-su-dung-pipe-trong-javascript-1Je5E6B4KnL
[7]
https://www.rung.vn/dict/en_vn/Parameterize
[8]
https://www.youtube.com/watch?v=VvefGxVzAhQ
Không phải lúc nào bạn cũng cần một Routing Module trong Angular. Routing Module là một kỹ thuật được sử dụng để tách phần định tuyến ra khỏi AppModule chính và quản lý nó trong một module riêng biệt. Điều này giúp cho việc quản lý định tuyến trở nên dễ dàng và rõ ràng hơn, đặc biệt là khi ứng dụng của bạn phát triển và có nhiều định tuyến phức tạp[15].
Tuy nhiên, với sự ra đời của các Standalone Components trong các phiên bản Angular mới, việc sử dụng Routing Module có thể không còn cần thiết trong một số trường hợp. Các Standalone Components cho phép bạn định nghĩa định tuyến mà không cần phải tạo một NgModule riêng biệt cho nó[7]. Điều này có thể làm giảm bớt sự phức tạp và số lượng code cần viết.
Ngoài ra, trong một số trường hợp đơn giản, bạn có thể chỉ cần định nghĩa định tuyến trực tiếp trong AppModule mà không cần tạo ra một Routing Module riêng biệt. Điều này phụ thuộc vào quy mô và yêu cầu cụ thể của dự án bạn đang làm việc[14][16].
Như vậy, việc sử dụng Routing Module hay không phụ thuộc vào kiến trúc và yêu cầu của ứng dụng Angular mà bạn đang phát triển.
Citations:
[1]
https://wifi.fpt.net/huong-dan-cau-hinh/huong-dan-cach-kich-hoat-routing-tren-unifi-switch-layer-3/
[2]
https://viettuans.vn/rip-protocol-la-gi
[3]
https://www.reddit.com/r/angular/comments/15p00at/when_to_create_a_separate_module/
[4]
https://longnv.name.vn/lap-trinh-angular/routing-trong-angular
[5]
https://www.smashingmagazine.com/2018/11/a-complete-guide-to-routing-in-angular/
[6]
https://viblo.asia/p/co-ban-ve-router-trong-angular-m68Z04EXZkG
[7]
https://www.angulararchitects.io/en/blog/routing-and-lazy-loading-with-standalone-components/
[8]
https://stackoverflow.com/questions/64117210/how-to-use-routing-with-module-instead-of-component-in-angular-10
[9]
https://nodemy.vn/huong-dan-su-dung-router-trong-next-js-cho-cac-ung-dung-web-tot-nhat/
[10]
https://viblo.asia/p/routing-trong-angular-co-the-ban-chua-biet-Qbq5Q6n3KD8
[11]
https://sociss.edu.vn/lessons/ky-thuat-dinh-tuyen-routing-co-ban-va-nang-cao-voi-nodejs
[12]
https://aws.amazon.com/vi/what-is/routing/
[13]
https://angular.io/tutorial/tour-of-heroes/toh-pt5
[14]
https://angular.io/guide/router-tutorial-toh
[15]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day028-router-feature-child-services.md
[16]
https://viblo.asia/p/routing-in-angular-5-Do754jDJZM6
[17]
https://www.sciencedirect.com/topics/computer-science/routing-module
[18]
https://vienthongxanh.vn/dinh-tuyen-la-gi/
[19]
http://tratu.soha.vn/dict/en_vn/Routing
TestBed là một môi trường phát triển phần mềm, nơi cho phép các nhà phát triển kiểm tra các module của họ mà không ảnh hưởng đến các phần khác của hệ thống hoặc môi trường sản xuất. Nó cung cấp một nền tảng thử nghiệm để đánh giá chức năng, hiệu suất, và độ tin cậy của một sản phẩm phần mềm trước khi nó được triển khai hoặc phát hành chính thức[1][5].
Citations:
[1]
https://viblo.asia/p/moi-truong-kiem-thu-trong-kiem-thu-phan-mem-63vKjJ16K2R
[2]
http://tratu.soha.vn/dict/en_vn/Test-bed
[3]
https://www.rung.vn/dict/en_vn/Test_bed
[4]
https://dictionary.cambridge.org/vi/dictionary/english/test-bed
[5]
https://viblo.asia/p/moi-truong-test-kiem-thu-trong-kiem-thu-phan-mem-tiep-07LKX2oJlV4
[6]
https://www.babla.vn/tieng-anh/test-bed
[7]
https://vtudien.com/anh-viet/dictionary/nghia-cua-tu-test-bed
[8]
https://vn.ichacha.net/men/test-bed.html
Các cách để kiểm soát biên dịch AOT (Ahead-Of-Time) bao gồm việc sử dụng các tùy chọn cấu hình và công cụ phát triển phần mềm (SDK) cụ thể. Trong môi trường phát triển, lập trình viên có thể chỉ định các quy tắc và tùy chọn biên dịch AOT thông qua các tệp cấu hình hoặc lệnh biên dịch. Ví dụ, trong một số ngôn ngữ lập trình và nền tảng, như Dart và Flutter, lập trình viên có thể sử dụng các lệnh cụ thể để tạo ra các file dành riêng cho kiến trúc hiện tại mà ứng dụng đang được biên dịch cho, qua đó kiểm soát quá trình biên dịch AOT[7]. Ngoài ra, trong một số trường hợp, như với Java, lập trình viên có thể sử dụng các tùy chọn biên dịch để kiểm soát việc biên dịch AOT, như việc vô hiệu hóa biên dịch lại và chỉ sử dụng bộ mã đã được AOT-biên dịch[10]. Đối với các ứng dụng Android, việc kiểm soát biên dịch AOT cũng có thể được thực hiện thông qua việc sử dụng các hồ sơ cơ sở để chỉ định các phương thức cụ thể nên được biên dịch AOT, nhằm cải thiện hiệu suất của ứng dụng[4].
Citations:
[1]
https://viblo.asia/p/tu-android-source-code-den-binary-code-ly-do-ios-nhanh-hon-android-1VgZvPN15Aw
[2]
https://devera.vn/blog/our-blog-1/post/hieu-javascript-nhu-trinh-duyet-web-50
[3]
https://amela.vn/hieu-het-ve-flutter-chi-trong-mot-bai-viet/
[4]
https://developer.android.com/topic/performance/baselineprofiles/overview?hl=vi
[5]
https://vncometech.com/bai-viet/so-sanh-jit-va-aot
[6]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[7]
https://blog.tda.company/dart-command-line-tools-p2/
[8]
https://developer.android.com/games/sdk/performance-tuner/unity/troubleshooting?hl=vi
[9]
https://docs.fileformat.com/vi/programming/dart/
[10]
https://techmaster.vn/posts/3914/target=%22_blank%22
[11]
https://developer.android.com/ndk/guides/graphics/shader-compilers?hl=vi
[12]
https://daohainam.com/2023/04/17/bai-9-kha-nang-sinh-code/
[13]
https://viblo.asia/p/003-jvm-code-cache-va-ahead-of-time-compiler-YWOZrrQRZQ0
[14]
https://javarush.com/vi/groups/posts/vi.542.java-mi-mt-ln-na-gp-g-java-10
[15]
https://portal.huc.edu.vn/ios/baccarat-rouge-540-extrait-200ml.html
[16]
http://security.vtc.vn/news/6699/ky-thuat-r2r-stomping-p1
Lazy Loading trong Angular là một kỹ thuật cho phép tải các thành phần hoặc mô-đun JavaScript chỉ khi chúng cần thiết, thay vì tải tất cả cùng một lúc khi ứng dụng khởi động. Kỹ thuật này giúp cải thiện thời gian tải ban đầu của ứng dụng bằng cách chia nhỏ ứng dụng thành nhiều gói (bundles), và chỉ tải những gói cần thiết khi người dùng điều hướng qua ứng dụng. Điều này giúp giảm kích thước gói ban đầu, từ đó giảm thời gian tải và cải thiện hiệu suất ứng dụng[1][2][3][4][5][6][7][8].
Khi sử dụng Lazy Loading, một mô-đun chỉ được tải khi có một hành
động cụ thể từ người dùng, chẳng hạn như khi họ chuyển đến một route cụ thể
trong ứng dụng. Điều này được thực hiện thông qua việc cấu hình router trong
Angular, sử dụng thuộc tính loadChildren để chỉ định mô-đun nào sẽ
được tải một cách lười biếng (lazy)[1][2][3][4][5][6][7][8].
Các bước cơ bản để triển khai Lazy Loading trong một dự án Angular bao gồm việc tạo một mô-đun mới với routing riêng biệt, tạo các thành phần trong mô-đun đó, và cấu hình router để sử dụng Lazy Loading cho các route tương ứng. Khi người dùng truy cập vào một route được cấu hình để tải lười biếng, mô-đun và các thành phần liên quan sẽ được tải động[1][2][3][4][5][6][7][8].
Ngoài ra, Angular còn cung cấp các chiến lược tiên tiến hơn cho Lazy Loading, như Preloading, cho phép tải trước các mô-đun quan trọng trong nền sau khi trang ban đầu được tải, nhằm cải thiện thêm trải nghiệm người dùng. Có thể tạo ra các chiến lược Preloading tùy chỉnh để tinh chỉnh hiệu suất ứng dụng dựa trên nhu cầu cụ thể[1][2][3][4][5][6][7][8].
Citations:
[1]
https://www.bairesdev.com/blog/angular-lazy-loading/
[2]
https://www.c-sharpcorner.com/article/step-by-step-guide-to-implement-lazy-loading-in-an-angular-project/
[3]
https://www.turing.com/kb/lazy-loading-in-angular-11
[4]
https://www.javatpoint.com/angular-lazy-loading
[5]
https://www.scaler.com/topics/angular/lazy-loading-in-angular/
[6]
https://www.freecodecamp.org/news/lazy-loading-in-angular-intro-to-ngmodules/
[7]
https://www.digitalocean.com/community/tutorials/angular-lazy-loading
[8]
https://angular.io/guide/lazy-loading-ngmodules**
Để gói một ứng dụng Angular cho môi trường sản xuất, bạn cần thực hiện các bước sau:
npm install -g @angular/cli[1].ng new projectFolder để tạo một ứng dụng mới[1].ng build --configuration production để xây dựng ứng dụng của
bạn cho môi trường sản xuất. Từ Angular 14 trở đi, bạn có thể sử dụng cấu
hình này[1].for i in dist/*/*/*; do brotli $i; done để giảm kích thước của
các tệp[1].dist lên máy chủ web của mình. Bạn cũng
có thể triển khai ứng dụng Angular của mình lên GitHub sử dụng
angular-cli-ghpages[1].Lưu ý rằng, tùy thuộc vào quy mô của ứng dụng, bạn có thể cần xem xét việc sử dụng các kỹ thuật như lazy loading để tối ưu hóa hiệu suất. Webpack là công cụ được khuyến nghị cho việc này vì nó hỗ trợ phân chia mã, trong khi Rollup hoặc Closure compiler có thể được xem xét cho các ứng dụng đơn lẻ nhỏ hơn[1].
Citations:
[1]
https://stackoverflow.com/questions/37631098/how-to-bundle-an-angular-app-for-production
[2]
https://viblo.asia/p/xay-dung-ung-dung-angular-cho-production-aWj538kbK6m
[3]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-80-%E2%80%93-co-gi-moi-cach-nang-cap-ra-sao-202.html
[4]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[5]
https://angular.io/guide/deployment
[6]
https://www.studocu.com/vn/document/truong-dai-hoc-fpt/programming-fundamentals/1-guide-new-project-with-angular/51745415
[7]
https://www.tiepphan.com/angular-trong-5-phut-deploy-angular-application-firebase-hosting/
[8]
https://itzone.com.vn/vi/article/mot-so-cach-de-cai-thien-hieu-nang-cua-ung-dung-angular/
Để kiểm soát kích thước của một phần tử khi thay đổi kích thước cửa sổ trong một thành phần Angular, bạn có thể sử dụng một số phương pháp khác nhau. Dưới đây là hai phương pháp phổ biến:
Bạn có thể sử dụng trình bao nghe sự kiện HostListener
để lắng nghe sự kiện thay đổi kích thước cửa sổ và sau đó cập nhật kích thước
của phần tử tương ứng. Dưới đây là một ví dụ về cách thực hiện:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-resizable',
template: `
<div class="resizable" [style.width.px]="width" [style.height.px]="height">
<h1>Geeks For Geeks!</h1>
Cách kiểm soát kích thước
</div>
`,
styleUrls: ['./resizable.component.css']
})
export class ResizableComponent {
width = 400;
height = 300;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.width = event.target.innerWidth;
this.height = event.target.innerHeight;
}
}
Trong ví dụ trên, mỗi khi cửa sổ được thay đổi kích thước, phương
thức onResize sẽ được gọi và cập nhật kích thước của phần tử
div tương ứng[2].
Một phương pháp khác là sử dụng gói
angular-resize-event từ NPM, cho phép bạn dễ dàng lắng nghe sự kiện
thay đổi kích thước của phần tử. Đầu tiên, bạn cần cài đặt gói này:
npm install angular-resize-event
Sau đó, bạn có thể sử dụng directive resized để lắng
nghe sự kiện thay đổi kích thước và xử lý nó trong thành phần của mình:
import { Component } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';
@Component({
selector: 'my-component',
template: `<div (resized)="onResized($event)"></div>`
})
export class MyComponent {
onResized(event: ResizedEvent) {
console.log('New width:', event.newWidth);
console.log('New height:', event.newHeight);
}
}
Trong ví dụ này, mỗi khi kích thước của phần tử div
thay đổi, phương thức onResized sẽ được gọi với thông tin mới về
kích thước[6].
Citations:
[1]
https://aglowiditsolutions.com/blog/angular-responsive/
[2]
https://www.geeksforgeeks.org/how-to-control-size-of-an-element-on-resize-of-window-in-a-component/
[3]
https://www.devtopics.com/building-responsive-web-apps-with-angular-material-a-comprehensive-guide/
[4]
https://blog.angular-university.io/angular-responsive-design/
[5]
https://www.htmlgoodies.com/javascript/element-resizing-angular/
[6]
https://www.npmjs.com/package/angular-resize-event
[7]
https://www.browserstack.com/guide/how-to-make-angular-project-responsive
[8]
https://dev.to/christiankohler/how-to-use-resizeobserver-with-angular-9l5
[9]
https://www.digitalocean.com/community/tutorials/detect-responsive-screen-sizes-in-angular
[10]
https://community.plotly.com/t/angular-plotly-component-resize-when-parent-div-size-changes/39570
[11]
https://blog.stackademic.com/crafting-responsive-angular-uis-a-comprehensive-guide-to-building-adaptive-user-interfaces-4d17993e5ae7?gi=28cb619d6b1c
[12]
https://talent500.co/blog/responsive-design-techniques/
[13]
https://stackoverflow.com/questions/35527456/angular-window-resize-event
[14]
https://dev.to/nikosanif/how-to-set-dynamic-height-at-element-with-angular-directive-5986
[15]
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
[16]
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
[17]
https://github.com/angular/angular/issues/30145
[18]
https://www.youtube.com/watch?v=_ZDYqYgM8SI
[19]
https://stackblitz.com/edit/angular-resize-event-playground?file=src%2Fapp%2Fapp.component.html
Trong Angular, MVVM là viết tắt của Model-View-ViewModel. Đây là một mô hình kiến trúc phần mềm phân chia ứng dụng thành ba phần chính: Model, View và ViewModel.
Để triển khai MVVM trong một ứng dụng Angular, bạn sẽ tạo ra các lớp Model để định nghĩa dữ liệu, sử dụng các component Angular làm ViewModel để xử lý logic ứng dụng và liên kết dữ liệu với View, và cuối cùng là tạo các template HTML làm View để hiển thị giao diện người dùng và ràng buộc dữ liệu từ ViewModel.
MVVM không phải là mô hình kiến trúc duy nhất mà Angular có thể sử dụng, nhưng nó chia sẻ một số khái niệm với MVC và MVVM và có thể được xem là một phần của kiến trúc tổng thể của Angular, đặc biệt là trong việc sử dụng two-way data binding và cách tổ chức mã.
Trong Angular, AOT viết tắt của Ahead-of-Time compilation, là một quá trình biên dịch mà trong đó các template và component của ứng dụng được biên dịch trước trong quá trình xây dựng (build phase), trước khi ứng dụng được triển khai lên máy chủ. Điều này khác với biên dịch Just-in-Time (JIT), mà ở đó việc biên dịch diễn ra tại thời điểm ứng dụng chạy trên máy khách (client).
AOT là một phần quan trọng trong quá trình xây dựng và triển khai ứng dụng Angular, đặc biệt là trong môi trường sản xuất, nơi mà hiệu suất và bảo mật là những yếu tố cần được ưu tiên hàng đầu.
Trong Angular, sự khác biệt chính giữa AOT (Ahead-of-Time) Compilation và JIT (Just-in-Time) Compilation liên quan đến thời điểm và cách thức mã nguồn của ứng dụng được biên dịch.
Trong thực tế, AOT thường được ưu tiên cho môi trường sản xuất vì lợi ích về hiệu suất và bảo mật, trong khi JIT thích hợp cho môi trường phát triển với khả năng cập nhật và xem thay đổi nhanh chóng.
AngularJS (Angular 1.x) và Angular (Angular 2.x trở lên) có một số khác biệt đáng chú ý:
Nhìn chung, Angular (2.x trở lên) mang lại nhiều cải tiến về cấu trúc, ngôn ngữ lập trình, và tính năng so với AngularJS (1.x), đồng thời hỗ trợ tốt hơn cho việc phát triển các ứng dụng web hiện đại và phức tạp.
Citations:
[1]
https://itbeesolutions.vn/angular-la-gi-angular-va-angularjs-co-giong-nhau-khong/
[2]
https://vn.got-it.ai/blog/angular-la-gi-su-khac-biet-giua-angular-va-angularjs
[3]
https://stringee.com/vi/blog/post/angularjs-la-gi
[4]
https://vietnix.vn/angular-la-gi/
[5]
https://nhanhoa.com/tin-tuc/angular-la-gi.html
[6]
https://viblo.asia/p/cung-tim-hieu-kien-truc-cua-angular-2-va-su-khac-nhau-ve-kien-truc-giua-angular-1-va-angular-2-gGJ592qpKX2
[7]
https://aptech.fpt.edu.vn/angular-la-gi.html
[8]
https://daynhauhoc.com/t/su-khac-biet-giua-angular-va-angularjs/67218
Zone trong Angular là một ngữ cảnh thực thi tồn tại xuyên suốt các tác vụ bất đồng bộ. Bạn có thể coi đó như là một kho lưu trữ cục bộ cho máy ảo JavaScript. Zone.js là một thư viện được sử dụng bởi Angular để theo dõi và quản lý các thay đổi trạng thái ứng dụng một cách hiệu quả thông qua việc bắt và quản lý các hoạt động bất đồng bộ như sự kiện click, HTTP requests, và nhiều hơn nữa. Zone.js giúp Angular tự động phát hiện các thay đổi và cập nhật giao diện người dùng mà không cần phải rõ ràng gọi các phương thức phát hiện thay đổi[3][4][6].
Citations:
[1]
https://angular8.hashnode.dev/cai-thien-hieu-nang-trong-ung-dung-angular
[2]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/gioi-thieu-ve-260.html
[3]
https://angular.io/guide/zone
[4]
https://viblo.asia/p/using-zones-in-angular-for-better-performance-gDVK2wRrZLj
[5]
https://www.tma.vn/Hoi-dap/Cam-nang-nghe-nghiep/Cach-cai-thien-hieu-suat-cua-ung-dung-Angular-voi-tinh-nang-Phat-hien-thay-doi-va-NgZone/56334
[6]
https://viblo.asia/p/tim-hieu-ve-zones-zonejs-RQqKLYaOZ7z
[7]
https://web.expressmagazine.net/hoc-ve-angular/tim-hieu-ng-zone-trong-angular.html
[8]
https://vn.ichacha.net/men/angular%20zone.html
Để chèn một view nhúng từ một TemplateRef đã được
chuẩn bị trong Angular, bạn có thể sử dụng ViewContainerRef để tạo
và quản lý các view trong container view. Dưới đây là các bước thực hiện:
Truy cập ViewContainerRef: Đầu tiên, bạn
cần truy cập vào ViewContainerRef của container mà bạn muốn
chèn view nhúng vào. Bạn có thể sử dụng @ViewChild hoặc
@ViewChildren để truy cập ViewContainerRef
thông qua một tham chiếu đến một element hoặc directive.
Sử dụng TemplateRef: Sau khi có
TemplateRef mà bạn muốn chèn, bạn cần truyền nó vào phương
thức createEmbeddedView của ViewContainerRef
để tạo một view nhúng.
Ví dụ:
import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<ng-template #myTemplate>
<div>Content from template</div>
</ng-template>
<div #container></div>
`,
})
export class AppComponent {
@ViewChild('myTemplate') myTemplateRef: TemplateRef<any>;
@ViewChild('container', { read: ViewContainerRef }) containerRef: ViewContainerRef;
ngAfterViewInit() {
this.containerRef.createEmbeddedView(this.myTemplateRef);
}
}
Trong ví dụ trên:
@ViewChild('myTemplate') được sử dụng để truy cập
TemplateRef thông qua tham chiếu #myTemplate trong
template.@ViewChild('container', { read: ViewContainerRef }) được sử
dụng để truy cập ViewContainerRef của element
<div #container></div>.createEmbeddedView của
ViewContainerRef được gọi với TemplateRef như một
đối số để chèn view nhúng vào container.Như vậy, bạn có thể chèn một view nhúng từ một
TemplateRef đã được chuẩn bị bằng cách sử dụng
ViewContainerRef và phương thức createEmbeddedView.
Để tạo một ứng dụng Angular sử dụng SCSS, bạn cần thực hiện các bước sau:
Cài đặt Angular CLI: Đầu tiên, bạn cần cài đặt Angular CLI (Command Line Interface) trên máy tính của mình. Angular CLI là một công cụ mạnh mẽ giúp bạn khởi tạo, phát triển, kiểm thử và triển khai ứng dụng Angular một cách dễ dàng. Bạn có thể cài đặt Angular CLI thông qua npm (Node Package Manager) bằng lệnh sau trong terminal hoặc command prompt:
npm install -g @angular/cli
Tạo Ứng Dụng Angular Mới: Sau khi đã cài đặt Angular
CLI, bạn có thể tạo một ứng dụng Angular mới và cấu hình nó để sử dụng
SCSS. Bạn có thể làm điều này bằng cách sử dụng lệnh ng new
và chọn SCSS làm tùy chọn cho kiểu trình bày (stylesheet) khi được hỏi.
Ví dụ:
ng new my-angular-app --style=scss
Trong đó my-angular-app là tên của ứng dụng Angular mới của
bạn. Lựa chọn --style=scss sẽ cấu hình ứng dụng của bạn để
sử dụng SCSS cho các tệp kiểu trình bày.
Phát Triển Ứng Dụng của Bạn: Bây giờ, bạn có thể bắt đầu
phát triển ứng dụng của mình bằng cách sử dụng SCSS cho các tệp kiểu
trình bày. Bạn có thể tạo các tệp SCSS mới cho các thành phần của mình
và liên kết chúng thông qua thuộc tính styleUrls trong các
trang trí (decorators) @Component của Angular.
Biên Dịch và Chạy Ứng Dụng: Cuối cùng, bạn có thể biên
dịch và chạy ứng dụng Angular của mình bằng cách sử dụng lệnh
ng serve. Điều này sẽ khởi động một máy chủ phát triển và
mở ứng dụng của bạn trong trình duyệt tại địa chỉ
http://localhost:4200/.
ng serve
Bằng cách tuân theo các bước trên, bạn có thể dễ dàng tạo và phát triển một ứng dụng Angular sử dụng SCSS để tạo kiểu cho giao diện người dùng của mình.
Citations:
[1]
https://funix.edu.vn/chia-se-kien-thuc/templateurls-styleurls-trong-angular/
[2]
https://longnv.name.vn/lap-trinh-angular/su-dung-component-trong-angular
[3]
https://www.tiepphan.com/practical-micro-frontends-angular/
[4]
https://xuanthulab.net/tao-va-su-dung-module-trong-angular.html
[5]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-2-can-ban-bai-6-ap-dung-css-cho-component-66.html
[6]
https://viblo.asia/p/tim-hieu-co-ban-ve-scss-bem-typescript-QpmlebGr5rd
[7]
https://viblo.asia/p/angular-nhung-kien-thuc-co-ban-de-tao-nen-mot-web-app-m68Z0wR2KkG
[8]
https://sec.vnpt.vn/2023/01/angular_trong_phat_trien_ung_dung_web_part_2/
Quá trình biên dịch trong Angular là một bước quan trọng và cần thiết vì nó chuyển đổi mã TypeScript và các template HTML thành JavaScript, mà sau đó có thể được thực thi bởi trình duyệt. TypeScript, ngôn ngữ chính được sử dụng trong Angular, không thể được hiểu trực tiếp bởi trình duyệt và cần phải được biên dịch thành JavaScript trước khi chạy. Ngoài ra, Angular sử dụng một số tính năng đặc biệt như binding, dependency injection, directives, và components, mà cũng cần được xử lý và chuyển đổi trong quá trình biên dịch để chúng có thể hoạt động đúng cách trong ứng dụng.
Angular cung cấp hai loại biên dịch: Just-In-Time (JIT) và Ahead-Of-Time (AOT). JIT biên dịch ứng dụng tại thời điểm chạy, ngay trong trình duyệt. Trong khi đó, AOT biên dịch ứng dụng trước khi chạy, tại thời điểm xây dựng ứng dụng, giúp tăng tốc độ tải và thực thi ứng dụng bằng cách giảm bớt công việc mà trình duyệt cần thực hiện.
Quá trình biên dịch cũng giúp tối ưu hóa ứng dụng bằng cách loại bỏ mã không sử dụng, kiểm tra lỗi trong mã nguồn, và tối ưu hóa binding và dependency injection. Điều này giúp tăng hiệu suất và bảo mật của ứng dụng.
Citations:
[1]
https://vietnix.vn/angular-la-gi/
[2]
https://teky.edu.vn/blog/angular-la-gi/
[3]
https://fptshop.com.vn/tin-tuc/danh-gia/angular-167279
[4]
https://viblo.asia/p/tai-sao-chung-ta-nen-su-dung-angular-eW65GEYPZDO
[5]
https://aptech.fpt.edu.vn/angular-la-gi.html
[6]
https://viblo.asia/p/gioi-thieu-tong-quan-ve-angular-07LKX9j2ZV4
[7]
https://angular8.hashnode.dev/cai-thien-hieu-nang-trong-ung-dung-angular
[8]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[9]
https://sunteco.vn/blog/tech-sharing/thay-doi-cau-hinh-ung-dung-web-angular-reactjs-bang-bien-moi-truong-ma-khong-can-rebuild/
[10]
https://levunguyen.com/laptrinhweb/2021/06/03/co-che-hoat-dong-trong-Angular/
[11]
https://viblo.asia/p/internationalization-i18n-trong-angular-5-ORNZqNg3l0n
[12]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-80-%E2%80%93-co-gi-moi-cach-nang-cap-ra-sao-202.html
[13]
https://www.phongvanit.com/ky-nang/angular-1016
[14]
https://sec.vnpt.vn/2022/12/angular_trong_phat_trien_ung_dung_web/
[15]
https://www.youtube.com/watch?v=XbW0BBjeB38
[16]
https://www.guru99.com/vi/angular-js-interview-questions.html
Service Workers trong Angular có mục đích chính là hỗ trợ việc tạo ra các Progressive Web Apps (PWA), giúp ứng dụng web có thể hoạt động mượt mà hơn, thậm chí là ngoại tuyến, và mang lại trải nghiệm người dùng gần giống như ứng dụng gốc trên thiết bị di động hoặc máy tính để bàn[1]. Service Workers hoạt động như một proxy mạng, cho phép kiểm soát các yêu cầu mạng và quản lý bộ nhớ cache, từ đó có thể tải nhanh nội dung và tăng cường hiệu suất của ứng dụng[4][5].
Khi sử dụng trong Angular, Service Workers được quản lý thông qua
gói @angular/service-worker. Gói này cung cấp khả năng tự động
cache các tài nguyên ứng dụng và quản lý bản cập nhật ứng dụng một cách hiệu
quả. Khi thực hiện build ứng dụng ở chế độ production, Angular CLI sẽ tự động
bao gồm Service Worker và các tệp cần thiết như ngsw-worker.js và
ngsw-config.json vào thư mục dist[1][3].
Service Workers cũng hỗ trợ các tính năng như đồng bộ hóa nền, thông báo đẩy (push notifications), và có thể giúp ứng dụng hoạt động trong điều kiện mạng kém hoặc không có kết nối mạng[1][6]. Điều này làm cho ứng dụng web trở nên linh hoạt và tiện lợi hơn cho người dùng, đồng thời cũng mở ra cơ hội để các nhà phát triển tận dụng các tính năng mới của web hiện đại.
Citations:
[1]
https://viblo.asia/p/build-progressive-web-app-pwa-with-angular-aWj53GYo56m
[2]
https://www.reddit.com/r/typescript/comments/163cwvq/why_is_it_hard_to_write_a_service_worker_in/
[3]
https://blog.angular-university.io/angular-service-worker/
[4]
https://kungfutech.edu.vn/bai-viet/javascript/service-worker-trong-javascaript
[5]
https://stackoverflow.com/questions/48100522/angular-io-interceptors-vs-service-workers
[6]
https://glints.com/vn/blog/service-worker-la-gi/
[7]
https://viblo.asia/p/tim-hieu-ve-service-worker-phan-1-maGK7myOlj2
[8]
https://topdev.vn/blog/5-dieu-can-nho-khi-lam-viec-voi-service-worker/
[9]
https://viblo.asia/p/gioi-thieu-ve-service-worker-Qbq5QLgXlD8
[10]
https://tenten.vn/tin-tuc/pwa-la-gi/
[11]
https://thanhle.blog/blog/state-trong-frontend-la-gi-tai-sao-nen-gioi-cai-nay
[12]
https://www.youtube.com/watch?v=HZxDFGB57jk
[13]
https://angular.io/guide/service-worker-getting-started
[14]
https://angular.io/guide/service-worker-devops
[15]
https://angular.io/guide/service-worker-communications
[16]
https://www.youtube.com/watch?v=m_lBrlE3dhw
[17]
https://ehkoo.com/bai-viet/lap-trinh-front-end-2017-mot-nam-nhin-lai/
[18]
https://topdev.vn/blog/frontend-developer-la-gi/
SystemJS là một module loader động cho JavaScript, nó giúp tải các module JavaScript trong các ứng dụng web. Trong bối cảnh của Angular, SystemJS được sử dụng để tải các file TypeScript và các module liên quan khi phát triển ứng dụng. Angular sử dụng TypeScript, một ngôn ngữ lập trình mở rộng từ JavaScript, và các file TypeScript này cần được biên dịch thành JavaScript trước khi chúng có thể chạy trên trình duyệt. SystemJS hỗ trợ việc này bằng cách tải các module TypeScript, giải quyết các phụ thuộc và biên dịch chúng sang JavaScript một cách hiệu quả.
Trong quá khứ, SystemJS đã được sử dụng rộng rãi trong các phiên bản đầu của Angular 2+ khi xây dựng và thử nghiệm các ứng dụng. Tuy nhiên, theo thời gian, các công cụ và cách tiếp cận mới đã phát triển, như Webpack, đã trở nên phổ biến hơn trong việc quản lý các module và phụ thuộc trong các ứng dụng Angular. Cụ thể, Webpack cung cấp khả năng bundle các tài nguyên và tối ưu hóa chúng cho môi trường production, điều mà SystemJS không tập trung vào[13][14].
Citations:
[1]
https://angular8.hashnode.dev/cai-thien-hieu-nang-trong-ung-dung-angular
[2]
https://aptech.fpt.edu.vn/angular-la-gi.html
[3]
https://viblo.asia/p/xay-dung-ung-dung-angular-cho-production-aWj538kbK6m
[4]
https://levunguyen.com/laptrinhweb/2021/06/03/co-che-hoat-dong-trong-Angular/
[5]
https://nhanhoa.com/tin-tuc/angular-la-gi.html
[6]
https://www.tiepphan.com/thu-nghiem-voi-angular-dependency-injection-trong-angular/
[7]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[8]
https://www.phongvanit.com/ky-nang/angular-1016
[9]
https://viblo.asia/p/thu-nghiem-voi-angular-dependency-injection-trong-angular-naQZRe7AKvx
[10]
https://sec.vnpt.vn/2023/01/angular_trong_phat_trien_ung_dung_web_part_2/
[11]
https://www.tiepphan.com/practical-micro-frontends-angular/
[12]
https://thachnuida.com/2015/12/02/lam-quen-voi-Angular2-Tao-mot-ung-dung-don-gian-bang-TypeScript/
[13]
https://viblo.asia/p/javascript-module-loader-from-the-basic-vyDZOoX9Zwj
[14]
https://techmaster.vn/posts/34393/khoi-dong-ung-dung-angular-2-dau-tien-cua-ban
Khi so sánh việc sử dụng local storage với cookie, cả hai đều có những ưu và nhược điểm riêng, đặc biệt là về mặt hiệu suất.
Tóm lại, việc sử dụng local storage thay cho cookie có thể mang lại lợi ích về hiệu suất do khả năng lưu trữ lớn hơn và không gửi dữ liệu đi cùng mỗi yêu cầu HTTP. Tuy nhiên, cần phải cân nhắc các vấn đề về bảo mật và giới hạn về việc truy cập dữ liệu từ phía máy chủ.
Citations:
[1]
https://viblo.asia/p/so-sanh-localstorage-sessionstorage-va-cookies-Ljy5VQQklra
[2]
https://caodang.fpt.edu.vn/tin-tuc-poly/tin-da-nang/tim-hieu-ve-cookies-localstorage-va-sessionstorage.html
[3]
https://viblo.asia/p/local-storage-session-storage-va-cookie-ORNZqN3bl0n
[4]
https://viblo.asia/p/su-khac-biet-giua-localstorage-sessionstorage-va-cookie-m68Z0Q7jlkG
[5]
https://bizflycloud.vn/tin-tuc/su-khac-biet-giua-localstorage-sessionstorage-va-cookie-20211119172344031.htm
[6]
https://www.linkedin.com/advice/0/how-do-you-implement-fallback-solutions-local-storage-cookies
[7]
https://aptechsaigon.edu.vn/luu-tru-du-lieu-tren-trinh-duyet-voi-local-storage-va-session-storage
[8]
https://bizflycloud.vn/tin-tuc/local-storage-la-gi-20210812234140935.htm
[9]
https://fptshop.com.vn/tin-tuc/danh-gia/local-storage-173578
[10]
https://stringee.com/vi/blog/post/local-storage-la-gi
[11]
https://cmccloud.vn/tin-tuc/local-storage-la-gi-196
[12]
https://fptshop.com.vn/tin-tuc/danh-gia/local-storage-la-gi-168614
[13]
https://teky.edu.vn/blog/local-storage-la-gi/
[14]
https://www.pivotpointsecurity.com/local-storage-versus-cookies-which-to-use-to-securely-store-session-tokens/
[15]
https://stackoverflow.com/questions/49708083/cookies-or-localstorage-is-best-way
[16]
https://www.youtube.com/watch?v=YLRTSVetPQ0
[17]
https://www.youtube.com/watch?v=9dloQfxucAc
[18]
https://kungfutech.edu.vn/cau-hoi-phong-van/giai-thich-su-khac-biet-giua-cookie-session-storage-va-local-storage
[19]
https://viblo.asia/p/su-dung-localstorage-tren-website-nhu-the-nao-bWrZn0395xw
[20]
https://lazycodet.com/3/read/402
Ivy Renderer là một hệ thống hiển thị mới được tích hợp vào Angular phiên bản 9, giúp cải thiện hiệu suất và tối ưu hóa kích thước của ứng dụng. Trong các phiên bản trước của Angular, để sử dụng Ivy Renderer, người dùng cần phải cấu hình lại trong file tsconfig.json. Tuy nhiên, từ phiên bản 9, Ivy Renderer đã được tích hợp mặc định và không cần thiết lập cấu hình thêm[1]. Ivy Renderer cung cấp khả năng biên dịch các component và template sang mã JavaScript, cho phép chúng được hiển thị trên trình duyệt[5].
Citations:
[1]
https://viblo.asia/p/co-gi-moi-trong-angular-phien-ban-9-63vKjzwdK2R
[2]
https://www.phongvanit.com/ky-nang/angular-1016
[3]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day038-dynamic-component.md
[4]
https://www.youtube.com/watch?v=08Roxt6_pAE
[5]
https://viblo.asia/p/vue-angular-react-ban-chon-gi-oOVlYkaBK8W
[6]
https://tinhte.vn/thread/do-hoa-tich-hop-tren-ivy-bridge-ho-tro-dx-11.840535/page-2?_bdcshHostname=viettel55&_bdcshRequestId=42F94423%3AA67C_AC120007%3A01BB_618AE4FA_80D99CB%3A01BD
[7]
https://itzone.com.vn/vi/article/co-gi-moi-trong-angular-phien-ban-9/
[8]
http://nhipsongkinhte.toquoc.vn/irender-cau-chuyen-ve-mot-cong-ty-cong-nghe-nho-be-voi-giai-phap-render-trong-linh-vuc-do-hoa-42020111117232455.htm
Lập trình phản ứng (Reactive Programming - RP) là một mô hình lập trình khai báo liên quan đến các luồng dữ liệu và sự lan truyền của sự thay đổi. Mô hình này tập trung vào việc lập trình với các luồng dữ liệu không đồng bộ, cho phép các ứng dụng dễ dàng phản ứng với sự thay đổi dữ liệu theo thời gian. RP cung cấp một cách tiếp cận linh hoạt và mạnh mẽ để xử lý các sự kiện, dữ liệu và tương tác người dùng trong các ứng dụng phức tạp[1][3][11][13][14][15].
Angular là một framework phát triển ứng dụng web phía client, được thiết kế để hỗ trợ lập trình phản ứng thông qua việc tích hợp sâu với thư viện RxJS (Reactive Extensions for JavaScript). RxJS là một thư viện cho phép lập trình phản ứng trong JavaScript, cung cấp các công cụ để tạo và quản lý các luồng dữ liệu và sự kiện. Angular sử dụng RxJS để tạo ra một hệ thống ứng dụng phản ứng, nơi các thành phần có thể dễ dàng phản ứng với sự thay đổi dữ liệu và sự kiện một cách hiệu quả[1][2][5][12].
Angular cung cấp các công cụ như Observables, Subjects, và Operators từ RxJS để giúp các nhà phát triển xây dựng các ứng dụng phản ứng. Observables cho phép định nghĩa các luồng dữ liệu, trong khi Subjects cho phép phát và tiêu thụ dữ liệu trong các luồng này. Operators cung cấp các hàm để xử lý và biến đổi dữ liệu trong các luồng một cách linh hoạt[2][5][8].
Lập trình phản ứng trong Angular mang lại nhiều ưu điểm, bao gồm:
Tóm lại, lập trình phản ứng là một phần quan trọng của Angular, giúp tạo ra các ứng dụng web hiện đại, linh hoạt và hiệu quả. Sự kết hợp giữa Angular và RxJS mang lại một nền tảng mạnh mẽ cho việc phát triển ứng dụng phản ứng, giúp các nhà phát triển xây dựng các ứng dụng phức tạp một cách dễ dàng hơn.
Citations:
[1]
https://viblo.asia/p/rxjs-va-reactive-programming-63vKj6oxK2R
[2]
https://www.tiepphan.com/rxjs-reactive-programming/
[3]
https://topdev.vn/blog/gioi-thieu-ve-reactive-programing-trong-javascript/
[4]
https://angular8.hashnode.dev/reactive-programming-trong-rxjs
[5]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-rxjs
[6]
https://viblo.asia/p/rxjs-va-reactive-programming-chi-tiet-ve-y-nghia-va-cach-hoat-dong-RnB5pMkrKPG
[7]
https://www.reddit.com/r/Angular2/comments/10hwlkm/explaining_reactive_programming_to_colleagues/
[8]
https://www.linkedin.com/pulse/understanding-angular-reactive-programming-signals-subjects-kirathe
[9]
https://dev.to/this-is-angular/i-changed-my-mind-angular-needs-a-reactive-primitive-n2g
[10]
https://viblo.asia/p/tim-hieu-reactive-programming-bWrZn1WYKxw
[11]
https://viblo.asia/p/reactive-programming-XL6lAn0D5ek
[12]
https://viblo.asia/p/functional-reactive-programming-voi-rxjs-va-angular-2-l5XRBV4WRqPe
[13]
https://t3h.com.vn/tin-tuc/reactive-programming
[14]
https://tvd12.com/posts/reactive-programming
[15]
https://ictvietnam.vn/reactive-programming-la-gi-41995.html
[16]
https://www.youtube.com/watch?v=bl6LB_NSP48
[17]
https://vi.wikipedia.org/wiki/L%E1%BA%ADp_tr%C3%ACnh_ph%E1%BA%A3n_%E1%BB%A9ng
[18]
https://gist.github.com/b6dc856762b5201d312b65e662e5af7d
[19]
https://tuhoclaptrinh.edu.vn/reactive-programming-la-gi-804.html
Các móc vòng đời (lifecycle hooks) trong Angular là những phương thức đặc biệt cho phép chúng ta can thiệp vào các giai đoạn khác nhau trong quá trình khởi tạo, cập nhật và phá hủy của một component hoặc directive. Các móc vòng đời này bao gồm:
ngOnChanges: Được gọi khi Angular thiết lập hoặc reset các
thuộc tính ràng buộc dữ liệu đầu vào của directive/component. Nếu
component/directive của bạn có các thuộc tính đầu vào, hàm này sẽ được
gọi trước ngOnInit và khi các thuộc tính đầu vào thay đổi
giá trị[2][3][4].
ngOnInit: Được gọi một lần sau khi ngOnChanges
được gọi lần đầu tiên và sau khi Angular hiển thị các thuộc tính ràng
buộc dữ liệu và đặt các thuộc tính đầu vào của directive/component[2][3][4].
ngDoCheck: Được gọi ngay sau ngOnInit và mỗi
khi Angular kiểm tra lại các thuộc tính ràng buộc dữ liệu. Phương thức
này cho phép bạn thực hiện các kiểm tra tùy chỉnh và hành động dựa trên
những thay đổi đó[4].
ngAfterContentInit: Được gọi một lần sau khi nội dung
(content) được projected vào component (ví dụ thông qua
<ng-content>) đã được khởi tạo[3][4].
ngAfterContentChecked: Được gọi sau
ngAfterContentInit và mỗi lần nội dung projected vào
component được kiểm tra lại bởi Angular[3][4].
ngAfterViewInit: Được gọi một lần sau khi các view của
component và các view của component con đã được khởi tạo[3][4].
ngAfterViewChecked: Được gọi sau
ngAfterViewInit và mỗi lần view của component và view của
component con được kiểm tra lại[3][4].
ngOnDestroy: Được gọi ngay trước khi Angular phá hủy
directive/component. Đây là nơi để dọn dẹp và hủy các subscriptions hoặc
event handlers để tránh memory leaks[3][4].
Các móc vòng đời này cung cấp các điểm can thiệp quan trọng cho các nhà phát triển để thực hiện các tác vụ cần thiết tại các thời điểm cụ thể trong vòng đời của component hoặc directive.
Citations:
[1]
https://vi.legacy.reactjs.org/docs/react-component.html
[2]
https://kungfutech.edu.vn/cau-hoi-phong-van/giai-thich-cac-vong-doi-trong-angular
[3]
https://levunguyen.com/laptrinhweb/2021/06/29/vong-doi-cua-component-trong-angular/
[4]
https://viblo.asia/p/lifecycle-hooks-trong-angular-6J3Zgw8qZmB
[5]
https://www.youtube.com/watch?v=APOq7sMTpZU
[6]
https://viblo.asia/p/lifecycle-hook-trong-angular-gDVK2LynlLj
[7]
https://sec.vnpt.vn/2023/02/angular_trong_phat_trien_ung_dung_web_part_3/
[8]
https://tedu.com.vn/video/bai-7-vong-doi-cua-components-component-lifecycle-1677.html
NgZone là một dịch vụ trong Angular giúp quản lý việc thực thi các hoạt động bên trong hoặc bên ngoài Angular Zone, từ đó kiểm soát quá trình phát hiện thay đổi và tối ưu hóa hiệu suất ứng dụng. Một mục đích tốt cho việc sử dụng NgZone là để thực hiện các hoạt động không đồng bộ hoặc các tác vụ có thể gây ra hiệu suất không mong muốn nếu chúng kích hoạt quá trình phát hiện thay đổi của Angular một cách không cần thiết.
Ví dụ, khi thực hiện các hoạt động như animation, xử lý sự kiện từ
bên ngoài Angular (như sự kiện từ thư viện JavaScript bên ngoài), hoặc thực hiện
các tác vụ nặng về tính toán mà không cần cập nhật giao diện người dùng ngay lập
tức, việc sử dụng NgZone.runOutsideAngular() để chạy các hoạt động
này bên ngoài Angular Zone có thể giúp tránh việc phát hiện thay đổi không cần
thiết, từ đó cải thiện hiệu suất ứng dụng[2][4].
Một trường hợp sử dụng khác là khi bạn muốn thực hiện một hoạt động
không đồng bộ và sau đó cập nhật dữ liệu của component một cách rõ ràng. Trong
trường hợp này, bạn có thể sử dụng this.ngZone.run() để đảm bảo
rằng hoạt động không đồng bộ được thực hiện trong Angular Zone, giúp kích hoạt
quá trình phát hiện thay đổi một cách tự động sau khi hoạt động hoàn thành[2].
Như vậy, NgZone cung cấp khả năng kiểm soát mạnh mẽ đối với quá trình phát hiện thay đổi của Angular, giúp các nhà phát triển có thể tối ưu hóa hiệu suất ứng dụng bằng cách quản lý cẩn thận việc thực thi các hoạt động bên trong hoặc bên ngoài Angular Zone.
Citations:
[1]
https://angular8.hashnode.dev/cai-thien-hieu-nang-trong-ung-dung-angular
[2]
https://www.tma.vn/Hoi-dap/Cam-nang-nghe-nghiep/Cach-cai-thien-hieu-suat-cua-ung-dung-Angular-voi-tinh-nang-Phat-hien-thay-doi-va-NgZone/56334
[3]
https://thanhbinhbent.com/lap-trinh/angular-co-ban-bai-2-tim-hieu-ve-service-trong-angular/
[4]
https://viblo.asia/p/using-zones-in-angular-for-better-performance-gDVK2wRrZLj
[5]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[6]
https://levunguyen.com/laptrinhweb/2021/07/10/su-dung-service-trong-angular/
[7]
https://web.expressmagazine.net/hoc-ve-angular/tim-hieu-ng-zone-trong-angular.html
[8]
https://www.phongvanit.com/ky-nang/angular-1016
[9]
https://angular.io/guide/zone
[10]
https://spiderum.com/bai-dang/Angular-4-Performance-Tips-a69
Incremental DOM là một kỹ thuật được sử dụng trong việc cập nhật DOM (Document Object Model) mà không cần tạo lại toàn bộ cây DOM từ đầu mỗi khi có sự thay đổi dữ liệu. Mỗi component trong Incremental DOM được biên dịch thành một chuỗi các chỉ dẫn để cập nhật DOM mỗi khi dữ liệu thay đổi[1][3]. Điều này giúp giảm bớt kích thước của gói tin và dấu chân bộ nhớ, đặc biệt là trên các thiết bị di động, bởi vì chỉ có những phần của DOM cần thay đổi mới được cấp phát bộ nhớ và cập nhật, thay vì tạo lại toàn bộ cây DOM[1].
Trái lại, Virtual DOM là một kỹ thuật mà trong đó một bản sao nhẹ của DOM thực được tạo ra trong bộ nhớ. Khi có sự thay đổi dữ liệu, một Virtual DOM tree mới sẽ được tạo ra và so sánh với bản sao trước đó. Sau đó, chỉ những thay đổi thực sự cần thiết mới được áp dụng lên DOM thực, giúp giảm thiểu số lượng các thao tác cập nhật DOM, từ đó cải thiện hiệu suất[2].
Sự khác biệt chính giữa Incremental DOM và Virtual DOM nằm ở cách chúng cập nhật DOM. Incremental DOM cập nhật trực tiếp trên DOM thực và chỉ cần bộ nhớ cho những phần thực sự thay đổi, trong khi Virtual DOM yêu cầu một bản sao toàn bộ cây DOM để so sánh và cập nhật, điều này có thể dẫn đến việc sử dụng bộ nhớ nhiều hơn[1][2].
Citations:
[1]
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36?gi=a6da80e693cf
[2]
https://vngeeks.com/khac-nhau-giua-virtual-dom-vs-dom/
[3]
https://viblo.asia/p/virtual-dom-and-dom-so-sanh-co-che-thao-tac-dom-giua-react-va-angular-07LKXjdklV4
[4]
https://www.imic.edu.vn/tin-tuc-cong-nghe/30713/react-vs-angular-chon-gi-cho-ung-dung-cua-ban-lua-chon-hoc-ngay-tai-imic.html
[5]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[6]
https://shgroup.vn/thiet-ke-noi-that-nha-pho-hien-dai/
[7]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-80-%E2%80%93-co-gi-moi-cach-nang-cap-ra-sao-202.html
[8]
https://viblo.asia/p/micro-frontend-architect-design-moi-hay-ganh-nang-GAWVpdGXV05
[9]
https://www.academia.edu/24756642/B%C3%A0i_ch%E1%BB%89_d%E1%BA%ABn_Python_B%C3%A0i_ch%E1%BB%89_d%E1%BA%ABn_Python
[10]
https://levunguyen.com/cauhoi/2020/06/17/cau-hoi-phong-van-lap-trinh-angular/
[11]
https://sanbetongnhedat.com/san-pham/vach-ngan-chiu-nuoc-ngoai-troi-bang-tam-duraflex-vinh-tuong/
[12]
https://blog.metacoders.dev/trinh-duyet-hoat-dong-nhu-the-nao/
Trong Angular, pure pipe và impure pipe là hai loại pipe được sử dụng để biến đổi dữ liệu trước khi hiển thị lên giao diện người dùng. Sự khác biệt chính giữa chúng nằm ở cách thức và thời điểm mà Angular thực hiện việc kiểm tra và kích hoạt cập nhật dữ liệu.
Pure pipe chỉ thực hiện thay đổi khi đầu vào thay đổi. Điều này có nghĩa là Angular sẽ kiểm tra sự thay đổi của đầu vào dựa trên object reference hoặc primitive value. Nếu không có sự thay đổi nào được phát hiện, Angular sẽ không thực hiện việc gọi lại hàm transform của pipe để cập nhật dữ liệu. Điều này giúp tối ưu hiệu suất bởi vì Angular không cần phải thực hiện các kiểm tra không cần thiết khi dữ liệu đầu vào không thay đổi[4].
Impure pipe có thể được kích hoạt mỗi khi có sự thay đổi trong application, bất kể sự thay đổi đó có liên quan đến đầu vào của pipe hay không. Điều này có nghĩa là mỗi lần Angular chạy chu trình kiểm tra thay đổi (change detection), impure pipe sẽ được đánh giá lại, ngay cả khi đầu vào không thay đổi. Điều này có thể dẫn đến việc giảm hiệu suất, đặc biệt là khi làm việc với các tập dữ liệu lớn, vì Angular sẽ phải thực hiện nhiều kiểm tra và tính toán hơn[1].
Một ví dụ về việc sử dụng impure pipe là khi bạn muốn pipe phản ứng
với các thay đổi trong một mảng hoặc đối tượng, như thay đổi giá trị của một
phần tử trong mảng hoặc một thuộc tính của đối tượng. Trong trường hợp này, bạn
có thể cấu hình pipe với thuộc tính pure có giá trị
false trong decorator[1].
Kết luận, khi lựa chọn giữa pure pipe và impure pipe, bạn cần cân nhắc giữa việc cập nhật dữ liệu linh hoạt với impure pipe và việc duy trì hiệu suất cao với pure pipe.
Citations:
[1]
https://kungfutech.edu.vn/bai-viet/angular/pipes-trong-angular
[2]
https://viblo.asia/p/tim-hieu-pipe-trong-angular-GrLZD332Kk0
[3]
https://www.academia.edu/30475777/%C4%90%E1%BB%81_TA_THPT_gi%E1%BA%A3i_chi_ti%E1%BA%BFt_
[4]
https://viblo.asia/p/thu-nghiem-voi-angular-pipe-trong-angular-XL6lAYbrlek
Để phát hiện sự thay đổi đường dẫn trong Angular, bạn có thể sử
dụng các sự kiện của Router để theo dõi các thay đổi đường dẫn. Cụ thể, bạn có
thể đăng ký lắng nghe các sự kiện như NavigationStart,
NavigationEnd, NavigationError, và các sự kiện khác
liên quan đến quá trình điều hướng. Dưới đây là một số cách thực hiện:
router.events để đăng ký lắng nghe các sự kiện điều
hướng. Bạn có thể lọc ra sự kiện cụ thể mà bạn muốn xử lý, ví dụ như
NavigationStart hoặc NavigationEnd[1][2].import { Router, NavigationStart, NavigationEnd } from '@angular/router';
export class AppComponent {
constructor(private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// Xử lý khi bắt đầu điều hướng
}
if (event instanceof NavigationEnd) {
// Xử lý khi kết thúc điều hướng
}
});
}
}
ActivatedRoute để lấy thông tin về đường dẫn hiện tại
và theo dõi các thay đổi thông qua params hoặc
queryParams[1][4].import { ActivatedRoute } from '@angular/router';
export class MyComponent {
constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
// Lấy tham số từ đường dẫn và xử lý
});
}
}
Đối với các phiên bản Angular mới hơn, bạn cũng có thể sử dụng
RouteAware từ thư viện @bespunky/angular-zen
để tự động phát hiện các thay đổi đường dẫn[1].
Nếu bạn chỉ muốn bảo vệ một đường dẫn và không cần phải biết khi nào
đường dẫn thay đổi, bạn có thể sử dụng CanActivate để tạo
một AuthGuard và gán nó cho các đường dẫn cần được bảo
vệ[1].
Lưu ý rằng bạn cần phải hủy đăng ký lắng nghe sự kiện khi
component bị hủy để tránh rò rỉ bộ nhớ. Điều này có thể được thực hiện bằng cách
lưu lại subscription và gọi phương thức unsubscribe() trong hàm
ngOnDestroy() của component.
Citations:
[1]
https://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular
[2]
https://ultimatecourses.com/blog/detecting-route-changes-angular-router
[3]
https://viblo.asia/p/co-ban-ve-router-trong-angular-2-63vKjn7yK2R
[4]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-router-trong-angular
[5]
https://viblo.asia/p/tim-hieu-ve-change-detection-trong-angular-djeZ18EjKWz
[6]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day030-router-guards-resolvers.md
[7]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[8]
https://www.youtube.com/watch?v=vtJtm6AxB8s
[9]
https://www.youtube.com/watch?v=o0gnQhsTYfI
[10]
https://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular?page=2&tab=scoredesc
[11]
https://viblo.asia/p/authorization-on-angular-routes-n6BkGyQwG5aV
Một số nguyên tắc an toàn tốt nhất trong Angular bao gồm:
Xử lý dữ liệu do người dùng cung cấp một cách cẩn thận: Angular coi tất cả dữ liệu do người dùng cung cấp là tiềm năng gây hại và áp dụng các chiến lược ràng buộc và hiển thị dữ liệu an toàn để tránh các lỗ hổng bảo mật như XSS (Cross-Site Scripting)[1].
Sử dụng HTTPS để bảo vệ dữ liệu trong quá trình truyền tải: Điều này giúp đảm bảo rằng dữ liệu được truyền đi một cách an toàn và không bị nghe lén hoặc thay đổi[1].
Kiểm tra định kỳ các thư viện bên thứ ba: Sử dụng công cụ như npm audit để xác định và giải quyết bất kỳ lỗ hổng bảo mật nào trong các gói phụ thuộc[1].
Khóa phiên bản của các gói phụ thuộc: Sử dụng các tệp như package-lock.json hoặc npm-shrinkwrap.json để đảm bảo tính nhất quán giữa các cài đặt và triển khai, đồng thời tránh tự động cập nhật lên các phiên bản mới có thể chứa các thay đổi không tương thích hoặc lỗ hổng bảo mật chưa được vá[1].
Tránh sử dụng các API nguy hiểm của Angular: Ví dụ, tránh sử dụng ElementRef vì nó cho phép truy cập trực tiếp vào DOM và có thể làm cho ứng dụng của bạn dễ bị tấn công XSS[3].
Không chỉnh sửa các tệp Angular: Điều này có thể khiến bạn bỏ lỡ các bản vá bảo mật trong các phiên bản sau[3].
Cập nhật thư viện Angular thường xuyên: Angular liên tục cung cấp các bản cập nhật cho việc sửa lỗi, vá lỗ hổng bảo mật và cải tiến tính năng, vì vậy việc giữ cho thư viện của bạn được cập nhật là rất quan trọng[4].
Sử dụng DomSanitizer để kiểm tra và làm sạch dữ liệu: Điều này giúp chuyển đổi các giá trị không đáng tin cậy do người dùng cung cấp thành các giá trị đáng tin cậy, giảm thiểu nguy cơ XSS[3].
Xác thực dữ liệu do người dùng gửi lên trên máy chủ: Điều này giúp ngăn chặn các lỗ hổng liên quan đến dữ liệu[4].
Không sử dụng các thành phần có lỗ hổng bảo mật đã biết: Luôn kiểm tra và cập nhật các thành phần của dự án để tránh sử dụng các phiên bản có lỗ hổng[4].
Những nguyên tắc này giúp tăng cường bảo mật cho các ứng dụng Angular, giảm thiểu nguy cơ bị tấn công và bảo vệ dữ liệu người dùng.
Citations:
[1]
https://borstch.com/blog/development/angular-security-best-practices
[2]
https://stackoverflow.com/questions/70971399/angular-versions-are-versions-6-and-7-safe-from-attacks
[3]
https://www.syncfusion.com/blogs/post/top-5-best-practices-angular-app-security/amp
[4]
https://www.scholarhat.com/tutorial/angular/tips-to-secure-your-angular-applications
[5]
https://snyk.io/blog/angular-security-best-practices/
[6]
https://www.tatvasoft.com/blog/angular-optimization-and-best-practices/
[7]
https://angular.io/guide/security
[8]
https://angular.io/guide/releases
AOT, viết tắt của Ahead-of-Time compilation, là một quá trình biên dịch mà trong đó các template và component của ứng dụng được biên dịch trước trong quá trình xây dựng (build phase), trước khi ứng dụng được triển khai lên máy chủ. Điều này khác với biên dịch Just-in-Time (JIT), mà ở đó việc biên dịch diễn ra tại thời điểm ứng dụng chạy trên máy khách (client)[7]. Các lợi ích chính của AOT bao gồm:
Hiệu suất cao hơn: AOT cho phép trình duyệt tải xuống một phiên bản đã được biên dịch trước của ứng dụng, giúp ứng dụng có thể được hiển thị ngay lập tức mà không cần phải biên dịch lại. Điều này giúp tăng tốc độ hiển thị của ứng dụng[1][4].
Giảm số lượng yêu cầu bất đồng bộ: AOT giúp giảm số lượng yêu cầu bất đồng bộ bằng cách nội suy các template HTML và stylesheet CSS vào trong mã JavaScript của ứng dụng, loại bỏ nhu cầu phải thực hiện các yêu cầu AJAX riêng biệt[1].
Kích thước tải xuống nhỏ hơn: AOT không yêu cầu tải xuống trình biên dịch Angular, giúp giảm đáng kể kích thước tải xuống của ứng dụng[1].
Phát hiện lỗi sớm hơn: AOT có thể phát hiện và báo cáo lỗi liên kết template trong quá trình xây dựng, trước khi người dùng có thể thấy chúng[1][4].
An ninh tốt hơn: AOT biên dịch các template HTML và component thành mã JavaScript trước khi chúng được phục vụ cho khách hàng, giảm thiểu cơ hội cho các cuộc tấn công thông qua việc tiêm mã độc hại[1].
Những lợi ích này làm cho AOT trở thành một lựa chọn ưu tiên cho việc triển khai ứng dụng Angular trong môi trường sản xuất, đặc biệt là khi tối ưu hóa hiệu suất và an ninh là những yếu tố quan trọng.
Citations:
[1]
https://iq.js.org/questions/angular/what-are-the-advantages-with-aot
[2]
https://betterprogramming.pub/a-brief-intro-to-ahead-of-time-aot-compilation-in-angular-f13517592cce
[3]
https://tanca.io/blog/bo-cau-hoi-phong-van-angular-duoc-dung-nhieu-nhat
[4]
https://blogs.halodoc.io/ahead-of-time-compilation/
[5]
https://www.reddit.com/r/dotnet/comments/18mx4aa/why_are_so_many_of_you_talking_about_using_aot_in/
[6]
https://source.vn/ngon-ngu-lap-trinh-dart/
[7]
https://kungfutech.edu.vn/cau-hoi-phong-van/aot-la-gi-va-neu-uu-diem-cua-no
[8]
https://sentry.engineering/blog/should-you-could-you-aot
[9]
https://fptshop.com.vn/tin-tuc/danh-gia/angular-167279
[10]
https://glints.com/vn/blog/cau-hoi-phong-van-angular-va-cach-tra-loi/
[11]
https://www.linkedin.com/pulse/ahead-of-time-compilation-vs-just-in-time-java-comparative-raj
[12]
https://viblo.asia/p/toi-uu-lai-application-angular-trong-qua-trinh-phat-trien-WAyK8kMe5xX
[13]
https://viblo.asia/p/003-jvm-code-cache-va-ahead-of-time-compiler-YWOZrrQRZQ0
[14]
https://stackoverflow.com/questions/56802691/is-there-any-advantage-of-using-jit-compilation-in-angular-in-favor-of-using-aot
[15]
https://vncometech.com/bai-viet/so-sanh-jit-va-aot
[16]
https://developer.android.com/topic/performance/baselineprofiles/overview?hl=vi
[17]
https://vncometech.com/bai-viet/lap-trinh-huong-thu-tuc
[18]
https://www.ittc.ku.edu/~kulkarni/CARS/papers/pgo.pdf
[19]
https://langdev.stackexchange.com/questions/981/what-are-the-advantages-and-disadvantages-of-just-in-time-compilation
[20]
https://kungfutech.edu.vn/cau-hoi-phong-van/su-khac-biet-giua-aot-va-jit-la-gi
Bazel là một công cụ xây dựng được Google giới thiệu và sử dụng, và nó đã được tích hợp vào Angular 8 như một phần của các công cụ xây dựng. Việc sử dụng Bazel trong quá trình xây dựng Angular mang lại một số lợi ích đáng kể:
Hiệu suất cao và Tái sử dụng hiệu quả: Bazel tối ưu hóa quá trình xây dựng bằng cách sử dụng caching và thực hiện song song các tác vụ. Điều này giúp giảm đáng kể thời gian cần thiết để xây dựng và kiểm thử ứng dụng, đặc biệt là trong các dự án lớn.
Tính nhất quán: Bazel đảm bảo rằng mọi người trong nhóm làm việc với cùng một môi trường xây dựng, giảm thiểu vấn đề "nó hoạt động trên máy tôi". Điều này giúp tránh được các vấn đề phức tạp liên quan đến sự khác biệt giữa các môi trường phát triển.
Quản lý phụ thuộc: Bazel cung cấp một cách mạnh mẽ để quản lý phụ thuộc, giúp đảm bảo rằng các thư viện và công cụ được sử dụng trong dự án được cập nhật và tương thích với nhau.
Khả năng mở rộng: Bazel được thiết kế để xử lý các dự án với quy mô lớn một cách hiệu quả, điều này làm cho nó trở thành công cụ lý tưởng cho các dự án Angular lớn, nơi mà việc xây dựng và kiểm thử có thể trở nên rất tốn thời gian nếu không được tối ưu hóa.
Hỗ trợ đa ngôn ngữ: Bazel hỗ trợ xây dựng ứng dụng sử dụng nhiều ngôn ngữ lập trình, điều này làm cho nó trở thành công cụ lý tưởng cho các dự án phức tạp sử dụng nhiều công nghệ khác nhau, bao gồm cả Angular.
Trong bối cảnh của Angular 8, việc giới thiệu Bazel là một phần của nỗ lực nhằm cải thiện trải nghiệm phát triển và tối ưu hóa quá trình xây dựng ứng dụng[2].
Citations:
[1]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[2]
https://tedu.com.vn/lap-trinh-angular-2-can-ban/angular-80-%E2%80%93-co-gi-moi-cach-nang-cap-ra-sao-202.html
[3]
https://niithanoi.edu.vn/cam-nang-25-ky-nang-ma-cac-lap-trinh-vien-java-can-co-trong-nam-2022.html
[4]
https://blog.freec.asia/angular-roadmap/?amp=1
[5]
https://www.giaosucan.com/2023/07/kien-truc-faang-7-meta-developer.html?m=1
Trong Angular, việc tải module có thể được thực hiện theo ba cách chính: Eager Loading, Lazy Loading và Preloading.
Eager Loading (Tải Ngay Lập Tức):
Eager Loading là phương pháp tải tất cả các module ngay khi ứng dụng
khởi động, bất kể chúng có được cần ngay lập tức hay không. Phương pháp
này thường được sử dụng trong các ứng dụng có kích thước nhỏ, vì nó có
thể làm tăng kích thước gói ban đầu và ảnh hưởng đến thời gian tải ứng
dụng[5].
Lazy Loading (Tải Khi Cần):
Lazy Loading là kỹ thuật cho phép tải các module một cách linh hoạt, chỉ
khi chúng thực sự cần thiết, tức là khi người dùng điều hướng đến một
route cụ thể trong ứng dụng. Điều này giúp giảm kích thước gói ban đầu
và cải thiện tốc độ tải ứng dụng, đặc biệt là đối với các ứng dụng lớn.
Để thực hiện Lazy Loading, chúng ta sử dụng thuộc tính
loadChildren trong cấu hình route, và module đó không được
import trực tiếp trong AppModule[1][3][4][6].
Preloading (Tải Trước):
Preloading là phương pháp tải các module trong nền ngay sau khi ứng dụng
khởi động. Điều này giúp các module sẵn sàng để sử dụng ngay khi người
dùng cần đến chúng mà không phải chờ đợi quá trình tải. Có thể cấu hình
Preloading cho tất cả các module hoặc chỉ định một số module cụ thể để
tải trước. Để cấu hình Preloading, chúng ta sử dụng thuộc tính
preloadingStrategy trong RouterModule.forRoot[3][4].
Ví dụ về cách cấu hình Lazy Loading trong Angular:
const routes: Routes = [
{
path: 'feature',
loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Trong ví dụ trên, module FeatureModule sẽ chỉ được
tải khi người dùng điều hướng đến đường dẫn /feature trong ứng
dụng.
Citations:
[1]
https://www.c-sharpcorner.com/article/step-by-step-guide-to-implement-lazy-loading-in-an-angular-project/
[2]
https://viblo.asia/p/hieu-ve-angular-modules-ngmodule-va-scope-cua-no-naQZRLJm5vx
[3]
https://dev.to/krishna7852/angular-module-loading-eager-lazy-and-preloading-3jj4
[4]
https://www.concretepage.com/angular-2/angular-module-loading-eager-lazy-and-preloading
[5]
https://blog.stackademic.com/two-types-of-loading-in-angular-8c9c76815b7d?gi=eec7628035fa
[6]
https://dev.to/mana95/how-to-implement-lazy-loading-in-your-angular-application-4gi1
[7]
https://longnv.name.vn/lap-trinh-angular/module-trong-angular
[8]
https://xuanthulab.net/tao-va-su-dung-module-trong-angular.html
[9]
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
[10]
https://levunguyen.com/laptrinhweb/2021/06/03/co-che-hoat-dong-trong-Angular/
[11]
https://www.tiepphan.com/angular-http-client-module-option/
[12]
https://angular.io/guide/lazy-loading-ngmodules
[13]
https://angular.io/guide/architecture-modules
[14]
https://freetuts.net/module-trong-angular-4-1308.html
[15]
https://kungfutech.edu.vn/bai-viet/angular/lazy-loading-module
[16]
https://sec.vnpt.vn/2023/01/angular_trong_phat_trien_ung_dung_web_part_2/
Trong các bài kiểm thử Jasmine của Angular,
detectChanges là một phương thức được gọi trên đối tượng
fixture để yêu cầu Angular thực hiện phát hiện thay đổi. Khi một
thuộc tính của component thay đổi giá trị tại thời điểm chạy, việc gọi
detectChanges là cần thiết để cập nhật giá trị mới vào template
HTML của component. Nói cách khác, detectChanges thông báo cho
Angular rằng cần phải kiểm tra lại và áp dụng bất kỳ thay đổi nào đối với dữ
liệu được ràng buộc trong template, đảm bảo rằng giao diện người dùng phản ánh
chính xác trạng thái hiện tại của model[1][2][3][4].
Phát hiện thay đổi không được thực hiện tự động trong các bài kiểm
thử, do đó việc gọi detectChanges là bước quan trọng để đảm bảo
rằng các thay đổi trong dữ liệu của component được phản ánh trong DOM trước khi
thực hiện các kiểm tra xác nhận[3].
Điều này giúp kiểm tra các tình huống như việc hiển thị dữ liệu mới hoặc thay
đổi trạng thái giao diện dựa trên các điều kiện nhất định.
Citations:
[1]
https://www.concretepage.com/angular/angular-test-change-detection
[2]
https://dev.to/ussdlover/re-run-angular-oninit-lifecycle-in-unit-test-53h8
[3]
https://www.digitalocean.com/community/tutorials/angular-introduction-unit-testing
[4]
https://stackoverflow.com/questions/62180812/why-fixture-detectchanges-is-required-for-a-unit-test-jasmine-karma
[5]
https://www.youtube.com/watch?v=KlYRjvT1DTE
[6]
https://angular.io/guide/testing-components-scenarios
[7]
https://angular.io/guide/testing-components-basics
[8]
https://codecraft.tv/courses/angular/unit-testing/change-detection/
Không, các phần tử tùy chỉnh tự khởi động (hoặc bắt đầu) tự động khi chúng được thêm vào DOM, và tự động bị hủy khi được loại bỏ khỏi DOM. Một khi một phần tử tùy chỉnh được thêm vào DOM của bất kỳ trang nào, nó sẽ trông và hoạt động giống như bất kỳ phần tử HTML nào khác và không yêu cầu bất kỳ kiến thức đặc biệt nào về Angular[2].
Citations:
[1]
https://vi.glosbe.com/en/vi/c%C3%A2u%20h%E1%BB%8Fi
[2]
https://iq.js.org/questions/angular/do-i-need-to-bootstrap-custom-elements
[3]
https://blog.stackademic.com/exploring-the-power-of-angular-elements-building-modular-web-components-e382282298ce?gi=0c41dd726c47
[4]
https://tracau.vn
[5]
https://blog.bitsrc.io/diving-deep-into-angular-elements-c17a868d6894?gi=689d77dc04ac
[6]
https://www.angulararchitects.io/en/blog/angular-elements-web-components-with-standalone-components/
[7]
https://www.freecodecamp.org/news/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a/
[8]
https://buddy.works/tutorials/building-web-components-with-angular
[9]
https://lingvanex.com/translation/tieng-viet-sang-tieng-anh
[10]
https://nhanhoa.com/tin-tuc/dich-tieng-viet-sang-tieng-anh.html
[11]
https://stackoverflow.com/questions/62599647/is-there-a-way-to-make-a-custom-element-in-angular-8-or-9-without-using-the-sh
[12]
https://www.youtube.com/watch?v=hWFFv_daHZA
[13]
https://www.babla.vn/tieng-viet-tieng-anh/%C4%91%E1%BA%B7t-m%E1%BB%99t-c%C3%A2u-h%E1%BB%8Fi
[14]
https://support.google.com/translate/answer/6142474?co=GENIE.Platform%3DAndroid&hl=vi
[15]
https://translate.google.com/?hl=vi&op=translate&sl=en&tl=ja
[16]
https://www.youtube.com/watch?v=AhneDkGKWKA
[17]
https://getbootstrap.com/docs/5.0/customize/components/
[18]
https://angular.io/api/elements/createCustomElement
[19]
https://angular.io/guide/elements
[20]
https://angular.io/api/elements
Quy tắc ánh xạ giữa thành phần Angular và phần tử tùy chỉnh dựa trên khái niệm về "elements" trong Web Components. Trong Angular, bạn có thể tạo một custom element bằng cách sử dụng Angular Elements, một gói cho phép bạn đóng gói các thành phần Angular dưới dạng các phần tử tùy chỉnh có thể sử dụng được mọi nơi, ngay cả trong các ứng dụng không phải là Angular.
Để thực hiện việc này, bạn cần định nghĩa một thành phần Angular
như bình thường, sau đó sử dụng hàm createCustomElement từ
@angular/elements để chuyển đổi thành phần đó thành một class
custom element. Sau đó, bạn có thể đăng ký custom element này với trình duyệt
thông qua customElements.define, cung cấp tên tag cho phần tử và
class đã được chuyển đổi.
Khi đã đăng ký, phần tử tùy chỉnh này có thể được sử dụng như một HTML tag thông thường trong mã HTML của bạn. Các thuộc tính của thành phần Angular sẽ được ánh xạ thành các thuộc tính của custom element, và các sự kiện của thành phần sẽ được ánh xạ thành các sự kiện DOM mà bạn có thể lắng nghe.
Ví dụ, nếu bạn có một thành phần Angular với selector là
app-example, bạn có thể định nghĩa một custom element như sau:
import { createCustomElement } from '@angular/elements';
import { Injector } from '@angular/core';
import { ExampleComponent } from './example.component';
const exampleElement = createCustomElement(ExampleComponent, {injector: this.injector});
customElements.define('app-example', exampleElement);
Sau đó, bạn có thể sử dụng
<app-example></app-example> trong HTML của mình, và nó
sẽ hiển thị nội dung của thành phần ExampleComponent mà bạn đã tạo
trong Angular.
Citations:
[1]
https://topdev.vn/interview
[2]
https://www.mitsubishielectric.com/fa/assist/fa_dictionary/pdf/TD0010.pdf
[3]
https://www.mitsubishielectric.com/fa/assist/fa_dictionary/pdf/l00027viea.pdf
[4]
https://github.com/open-dsl-dict/wiktionary-dict/blob/master/src/en-vi-enwiktionary.txt
[5]
https://github.com/machinereading/frameBERT/blob/master/data/bert-multilingual-cased-dict-add-tgt
[6]
http://hdgslnkhtdm.com.vn/images/hdgsln/eme-form/eme-2019.pdf
[7]
https://huggingface.co/Geotrend/bert-base-en-fr-zh-ja-vi-cased/commit/0bd4ea4ccbc2ffc6b6713901f303d54f31a2cfc8.diff
[8]
https://www.academia.edu/30475777/%C4%90%E1%BB%81_TA_THPT_gi%E1%BA%A3i_chi_ti%E1%BA%BFt_
Một module được tải lười (lazy loaded) thường được tải vào thời điểm cần thiết, tức là khi nó thực sự được yêu cầu hoặc cần đến trong ứng dụng. Điều này thường xảy ra khi người dùng thực hiện một hành động nào đó như chuyển đến một phần khác của ứng dụng, hoặc khi một chức năng cụ thể được kích hoạt mà yêu cầu module đó. Việc tải module theo cách này giúp giảm thời gian tải ban đầu của ứng dụng và có thể cải thiện hiệu suất bằng cách chỉ tải những gì cần thiết cho người dùng tại một thời điểm cụ thể.
Citations:
[1]
https://vietnamnet.vn/tai-sao-cong-nghe-cang-phat-trien-chung-ta-cang-luoi-bieng-i276305.html
[2]
https://glints.com/vn/blog/luoi-bieng-la-gi/
[3]
https://tuoitre.vn/5-cach-de-ban-vuot-qua-cam-giac-luoi-bieng-2018031414265953.htm
[4]
https://www.bbc.com/vietnamese/vert-fut-52997483
[5]
https://genk.vn/khoa-hoc-ly-giai-vi-sao-nguoi-luoi-bieng-thuong-thong-minh-va-thanh-cong-20230215141538112.chn
[6]
https://danguykhoi.laichau.gov.vn/hoc-tap-va-lam-theo-loi-bac/phong-chong-benh-luoi-bieng-612452
[7]
https://codegym.vn/blog/meo-javascript-2-phut/
[8]
https://www.hotcourses.vn/study-abroad-info/once-you-arrive/5-reasons-you-should-be-lazy-more-often/
Trình biên dịch JIT (Just-In-Time) là một phần quan trọng của máy ảo Java (JVM) và các ngôn ngữ lập trình khác như JavaScript, có nhiệm vụ biên dịch mã byte sang mã máy ngay trong quá trình thực thi chương trình, thay vì trước khi chương trình được thực thi. Điều này giúp cho ứng dụng chạy nhanh hơn bởi vì JIT có thể tối ưu hóa mã máy dựa trên dữ liệu thực thi thời gian chạy, như việc xác định các đoạn mã được thực thi thường xuyên (hot code) và tối ưu hóa chúng[3][4].
Ngoài ra, JIT cũng giúp giảm bớt sự không hiệu quả khi một đoạn mã phải được thông dịch nhiều lần trong quá trình thực thi bằng cách lưu trữ các phiên bản đã được biên dịch của mã đó, để có thể tái sử dụng mà không cần phải biên dịch lại[1][2]. Điều này không chỉ giúp tăng tốc độ thực thi mà còn giảm thiểu việc sử dụng bộ nhớ và tài nguyên hệ thống.
Tóm lại, JIT đóng vai trò quan trọng trong việc cải thiện hiệu suất thực thi của các ứng dụng bằng cách biên dịch mã byte sang mã máy một cách linh hoạt và hiệu quả ngay trong quá trình chạy chương trình.
Citations:
[1]
https://viblo.asia/p/trinh-bien-dich-javascript-jit-just-in-time-jvElaXRdZkw
[2]
https://devera.vn/blog/our-blog-1/post/so-luoc-ve-javascript-engine-43
[3]
https://techmaster.vn/posts/36642/001-wora-jit-compiler-va-xx-printcompilation
[4]
https://vncometech.com/bai-viet/so-sanh-jit-va-aot
[5]
https://sps.org.vn/vai-tro-cua-jit-mo-hinh-just-in-time.html
[6]
https://viblo.asia/p/001-wora-jit-compiler-va-xxprintcompilation-gDVK2O3nZLj
[7]
http://icthanoi.edu.vn/trinh-bien-dich-just-in-time-2012.htm
[8]
https://filegi.com/tech-term/just-in-time-compiler-jit-compiler-1801/
[9]
https://vi.wikipedia.org/wiki/Tr%C3%ACnh_bi%C3%AAn_d%E1%BB%8Bch
[10]
https://topdev.vn/interview/what-is-jit-compiler
Sử dụng các module tải lười (lazy loading modules) trong ứng dụng Angular mang lại nhiều lợi ích về hiệu suất và trải nghiệm người dùng. Dưới đây là một số lý do chính:
Cải thiện thời gian tải trang đầu tiên: Khi sử dụng lazy loading, các module chỉ được tải khi chúng thực sự cần thiết, tức là khi người dùng điều hướng đến một phần cụ thể của ứng dụng. Điều này giúp giảm kích thước của bundle được tải xuống khi ứng dụng khởi động, từ đó cải thiện thời gian tải trang đầu tiên[1][4].
Giảm tải cho máy chủ: Việc tải các module một cách lười biếng giúp giảm lượng dữ liệu cần phải được truyền từ máy chủ đến trình duyệt, giảm tải cho máy chủ và tiết kiệm băng thông[4].
Tối ưu hóa tài nguyên: Lazy loading giúp tối ưu hóa việc sử dụng tài nguyên bằng cách đảm bảo rằng chỉ những tài nguyên thực sự cần thiết cho người dùng tại thời điểm hiện tại mới được tải. Điều này đặc biệt quan trọng đối với các ứng dụng lớn với nhiều tính năng và module[1][4].
Cải thiện trải nghiệm người dùng: Bằng cách giảm thời gian tải trang và tối ưu hóa việc sử dụng tài nguyên, lazy loading giúp cải thiện trải nghiệm người dùng. Người dùng sẽ ít phải chờ đợi hơn và có thể tương tác với ứng dụng một cách mượt mà hơn[4].
Dễ dàng mở rộng: Khi ứng dụng phát triển, việc thêm các tính năng mới dưới dạng các module tải lười giúp dễ dàng mở rộng ứng dụng mà không làm tăng đáng kể kích thước của bundle tải lần đầu[4].
Tóm lại, việc sử dụng lazy loading trong ứng dụng Angular giúp cải thiện hiệu suất, tối ưu hóa tài nguyên, và nâng cao trải nghiệm người dùng, đồng thời cung cấp khả năng mở rộng ứng dụng một cách linh hoạt.
Citations:
[1]
https://kungfutech.edu.vn/bai-viet/angular/lazy-loading-module
[2]
https://topdev.vn/blog/angular-tu-xay-dung-module-lazy-load-images/
[3]
https://topdev.vn/blog/kien-thuc-ve-lazy-loading-images-ma-ban-can-biet/
[4]
https://viblo.asia/p/angular-cai-thien-hieu-nang-va-trai-nghiem-nguoi-dung-voi-lazy-loading-djeZ1BkRlWz
[5]
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
[6]
https://angular8.hashnode.dev/cai-thien-hieu-nang-trong-ung-dung-angular
[7]
https://techhay.vn/angular-lazy-loading-modules-loi-va-hai/
[8]
https://techmaster.vn/posts/34390/lazy-loading-code-splitting-ngmodules-voi-webpack
NgUpgrade là một thư viện chính thức của Angular giúp nâng cấp từ AngularJS (phiên bản 1) lên các phiên bản Angular mới hơn (từ Angular 2 trở lên). NgUpgrade tạo điều kiện cho việc chạy cả hai phiên bản của Angular trong cùng một ứng dụng, cho phép các ứng dụng được nâng cấp từng phần một mà không cần phải viết lại toàn bộ ứng dụng[4][5].
Citations:
[1]
https://itviec.com/blog/angular-la-gi/
[2]
https://www.phongvanit.com/ky-nang/angular-1016
[3]
https://angular.io/guide/zone
[4]
https://galaxyz.net/cach-nang-cap-tu-angularjs-len-angular-voi-ngupgrade.2714.anews
[5]
https://techmaster.vn/posts/34205/30-tai-nguyen-mien-phi-de-lam-chu-angular2
[6]
https://galaxyz.net/cach-nang-cap-bo-loc-phan-loai-goc.2722.anews
[7]
https://www.youtube.com/watch?v=fWf1DNgi76I
[8]
https://www.imic.edu.vn/tin-tuc-cong-nghe/27762/30-tai-nguyen-mien-phi-de-lam-chu-angular2.html
Angular 9 mang lại một loạt các tính năng mới và cải tiến đáng chú ý, bao gồm:
Bộ biên dịch và thời gian chạy Ivy mặc định: Ivy là bộ biên dịch và thời gian chạy mới của Angular, giúp giảm kích thước gói, cải thiện hiệu suất và tăng cường khả năng tương thích với các tiêu chuẩn web hiện đại[1][2][3][4][5][6][7].
Cải thiện trải nghiệm người dùng với ng update: Angular 9 cung cấp trải nghiệm ng update được cải thiện, giúp quá trình cập nhật dễ dàng, chính xác và minh bạch hơn[3].
Cải thiện quốc tế hóa (i18n): Angular 9 giới thiệu các cải tiến đối với quốc tế hóa, bao gồm việc di chuyển các thay thế i18n vào cuối quá trình xây dựng, giúp quá trình này nhanh hơn đến 10 lần[2].
Cải thiện kích thước và hiệu suất gói: Nhờ vào Ivy, Angular 9 giúp giảm kích thước gói và cải thiện hiệu suất ứng dụng[1][4].
Cải thiện quá trình kiểm tra và gỡ lỗi: Angular 9 mang lại các cải tiến đáng kể trong việc kiểm tra và gỡ lỗi, bao gồm việc kiểm tra nhanh hơn và khả năng gỡ lỗi tốt hơn[1][2].
Cải thiện ràng buộc lớp và kiểu CSS: Angular 9 cải thiện khả năng ràng buộc lớp và kiểu CSS, giúp quản lý kiểu dễ dàng hơn và cải thiện hiệu suất ứng dụng[1].
Hỗ trợ TypeScript 3.7: Angular 9 được cập nhật để làm việc với TypeScript 3.6 và 3.7, bao gồm tính năng chuỗi tùy chọn phổ biến trong TypeScript 3.7[2][5].
Cải thiện công cụ và dịch vụ ngôn ngữ: Angular 9 mang lại các cải tiến đáng kể cho dịch vụ ngôn ngữ Angular và mở rộng Visual Studio Marketplace, giúp cải thiện trải nghiệm phát triển[2][5].
Các thành phần mới: Angular 9 giới thiệu các thành phần mới, bao gồm khả năng tích hợp với YouTube và Google Maps trong ứng dụng của bạn[2].
Những cải tiến này giúp Angular 9 trở thành một bản cập nhật lớn, hứa hẹn mang lại hiệu suất tốt hơn, kích thước gói nhỏ hơn và trải nghiệm phát triển ứng dụng web tốt hơn.
Citations:
[1]
https://www.geeksforgeeks.org/angular-9-0/
[2]
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3?gi=9fae30f19fc4
[3]
https://auth0.com/blog/angular-9-whats-new/
[4]
https://www.edureka.co/blog/angular-9/
[5]
https://www.angularminds.com/blog/top-10-features-of-angular-9
[6]
https://www.javatpoint.com/angular-9-features
[7]
https://www.toptal.com/angular/angular-9-tutorial-angular-ivy
Bạn sẽ sử dụng các phương thức renderer thay vì các phương thức của phần tử gốc (native element methods) trong Angular vì một số lý do chính sau đây:
Tính nền tảng độc lập: Renderer2 cung cấp một lớp trừu tượng giúp tương tác với DOM mà không phụ thuộc vào môi trường cụ thể nào. Điều này cho phép ứng dụng Angular có thể chạy không chỉ trong trình duyệt, mà còn trên server, trong web workers, và trong các môi trường di động và desktop mà không cần đến DOM[1][2][3].
An toàn bảo mật: Trực tiếp tương tác với DOM có thể làm cho ứng dụng dễ bị tấn công XSS. Renderer2 cung cấp một API an toàn hơn, giúp bảo vệ ứng dụng khỏi các nguy cơ bảo mật liên quan đến việc truy cập trực tiếp vào DOM[3].
Tương thích với cơ chế phát hiện thay đổi của Angular: Việc sử dụng trực tiếp các phương thức DOM có thể gây xung đột với cơ chế phát hiện thay đổi của Angular, dẫn đến vấn đề về hiệu suất. Renderer2 được thiết kế để làm việc một cách hài hòa với cơ chế này, giúp ứng dụng hoạt động mượt mà hơn[1][2].
Tối ưu hóa hiệu suất: Renderer2 cho phép các nhà phát triển lập trình các thao tác DOM một cách hiệu quả hơn, giảm thiểu số lượng công việc mà trình duyệt cần thực hiện cùng một lúc, từ đó giữ cho giao diện người dùng phản hồi nhanh chóng[1].
Khả năng tái sử dụng mã nguồn: Khi sử dụng Renderer2, các nhà phát triển có thể dễ dàng tái sử dụng mã nguồn trong các dự án khác nhau, bởi vì Renderer2 cung cấp một cách tiếp cận chuẩn hóa để tương tác với các phần tử DOM[2].
Tránh rò rỉ bộ nhớ: Renderer2 cung cấp các phương thức để đăng ký và hủy đăng ký các sự kiện, giúp quản lý bộ nhớ hiệu quả và tránh rò rỉ bộ nhớ khi các thành phần hoặc chỉ thị bị hủy[6].
Vì những lý do trên, Renderer2 được khuyến nghị sử dụng trong việc tương tác với DOM trong các ứng dụng Angular.
Citations:
[1]
https://borstch.com/blog/development/the-comprehensive-guide-to-angulars-renderer2
[2]
https://dev.to/manthanank/what-is-renderer2-how-to-use-it-in-angular-project-5l1
[3]
https://stackoverflow.com/questions/59300517/renderer-over-native-element-methods
[4]
https://www.tektutorialshub.com/angular/elementref-in-angular/
[5]
https://exoft.net/angular-pros-and-cons/
[6]
https://www.tektutorialshub.com/angular/renderer2-angular/
[7]
https://ej2.syncfusion.com/angular/documentation/chart/render-methods
[8]
https://itnext.io/using-renderer2-in-angular-8f80da6756f8?gi=1fe467008415
[9]
https://www.altexsoft.com/blog/the-good-and-the-bad-of-angular-development/
[10]
https://www.digitalocean.com/community/tutorials/angular-using-renderer2
[11]
https://www.turing.com/interview-questions/angular
[12]
https://ultimatecourses.com/blog/element-refs-in-angular-templates
[13]
https://www.calibraint.com/blog/benefits-of-angular-web-application-development
[14]
https://www.reddit.com/r/Angular2/comments/14zaqlw/any_good_guides_for_how_to_interact_with_the/
[15]
https://borstch.com/blog/development/angulars-ivy-renderer-what-you-need-to-know
[16]
https://blog.angulartraining.com/how-to-control-native-html-elements-with-angular-40aecb9e6796?gi=06cf64c5386b
[17]
https://angular.io/api/core/ElementRef
[18]
https://angular.io/api/core/DebugElement
[19]
https://angular.io/guide/ssr
[20]
https://www.albiorixtech.com/blog/advantages-of-angularjs/
Sự khác biệt chính giữa Incremental DOM và Virtual DOM nằm ở cách chúng cập nhật giao diện người dùng (UI) và quản lý thay đổi trong DOM.
Incremental DOM là một kỹ thuật được sử dụng bởi Google, đặc biệt trong Angular. Nó hoạt động bằng cách biên dịch mỗi component thành một loạt các chỉ dẫn. Các chỉ dẫn này tạo ra cây DOM và cập nhật chúng ngay tại chỗ khi dữ liệu thay đổi. Điều này giúp tối ưu hóa kích thước gói và bộ nhớ sử dụng bởi ứng dụng, đặc biệt quan trọng đối với các thiết bị di động. Incremental DOM không tạo ra một cây DOM ảo toàn bộ mỗi khi có sự thay đổi; thay vào đó, nó chỉ cập nhật những phần của DOM thực tế cần thay đổi[4].
Virtual DOM, mặt khác, là một kỹ thuật được sử dụng rộng rãi bởi các thư viện như React. Nó tạo ra một bản sao ảo của DOM (gọi là Virtual DOM) và mọi thay đổi trạng thái hoặc dữ liệu đầu tiên được áp dụng lên bản sao này. Sau đó, một thuật toán "diffing" so sánh bản sao ảo với bản sao trước đó để xác định sự khác biệt. Cuối cùng, chỉ những thay đổi thực sự cần thiết mới được áp dụng lên DOM thực, giúp tối ưu hóa hiệu suất bằng cách giảm thiểu số lượng cập nhật DOM[1][2][3].
Tóm lại, Incremental DOM tập trung vào việc cập nhật trực tiếp và tối ưu hóa DOM thực tế thông qua một loạt các chỉ dẫn, trong khi Virtual DOM tạo ra một bản sao ảo của DOM để quản lý thay đổi một cách hiệu quả trước khi áp dụng chúng lên DOM thực.
Citations:
[1]
https://viblo.asia/p/virtual-dom-wpVYRPqDM4ng
[2]
https://labs.flinters.vn/react-js/tai-sao-react-su-dung-virtual-dom/
[3]
https://vyquocvu.co/post/tu-viet-mot-thu-vien-frontend-dung-virtual-dom-nhu-react.0YP226FnBnWCjAWFQHlv
[4]
https://www.linkedin.com/pulse/incremental-dom-virtual-angular-ivy-akhil-kumar
[5]
https://duclvz.github.io/blog/8-JS-micro-framework/
[6]
https://viblo.asia/p/virtual-dom-and-dom-so-sanh-co-che-thao-tac-dom-giua-react-va-angular-07LKXjdklV4
[7]
https://topdev.vn/blog/dom-la-gi/
[8]
https://vi.legacy.reactjs.org/docs/faq-internals.html
[9]
https://vngeeks.com/khac-nhau-giua-virtual-dom-vs-dom/
[10]
https://viblo.asia/p/hieu-sao-ve-virtual-dom-trong-reactjs-bWrZngDblxw
[11]
https://codestus.com/posts/react-virtual-dom-duoc-hieu-nhu-the-nao
[12]
https://www.phongvanit.com/ky-nang/angular-1016
[13]
https://www.youtube.com/watch?v=Xh0fvn_gUKQ
[14]
https://codegym.vn/blog/tim-hieu-ve-virtual-dom-va-cach-hoat-dong/
Để thiết lập headers cho mọi yêu cầu trong Angular, bạn có thể sử
dụng HttpHeaders trong HttpClientModule.
HttpHeaders là immutable, nghĩa là mỗi lần bạn muốn thay đổi giá
trị của nó, bạn cần tạo một instance mới với giá trị đã được chỉnh sửa. Dưới đây
là một ví dụ về cách thiết lập headers cho một yêu cầu GET:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
export class PostService {
constructor(private httpClient: HttpClient) {}
getListPosts(): Observable<PostEntityModel[]> {
let headers: HttpHeaders = new HttpHeaders();
headers = headers.set('angularVN', 'Angular Viet Nam');
return this.httpClient.get<PostEntityModel[]>(
'https://jsonplaceholder.typicode.com/posts',
{ headers }
);
}
}
Trong ví dụ trên, chúng ta tạo một instance của
HttpHeaders và sử dụng phương thức set để thêm một
header mới với tên là 'angularVN' và giá trị là 'Angular Viet Nam'. Sau đó,
chúng ta truyền headers vào trong options của phương thức
get của HttpClient[4].
Nếu bạn muốn áp dụng headers này cho mọi yêu cầu HTTP trong ứng
dụng Angular của mình, bạn có thể sử dụng HttpInterceptor.
HttpInterceptor cho phép bạn can thiệp vào mọi yêu cầu và phản hồi
HTTP, từ đó bạn có thể dễ dàng thêm headers vào mọi yêu cầu mà không cần phải
thiết lập chúng một cách thủ công mỗi lần gửi yêu cầu.
Citations:
[1]
https://vnsolution.com.vn/huong-dan-hoc-css3-html5-phan-2-thiet-lap-cac-dau-vao.html
[2]
https://viblo.asia/p/content-projection-trong-angular-gGJ59Maa5X2
[3]
https://viblo.asia/p/tim-hieu-angular-7-xay-dung-ung-dung-voi-angular-phan-1-WAyK80PeKxX
[4]
https://www.tiepphan.com/angular-http-client-module-option/
[5]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-router-trong-angular
[6]
https://tinhte.vn/thread/dinh-tuyen-trong-angular.2890154/
[7]
https://techmaster.vn/posts/34132/target=%22_blank%22
[8]
https://labs.flinters.vn/angular-js/component-relative-paths-in-angular-2/
Câu trả lời là có, bạn có thể sử dụng jQuery với Angular, nhưng điều này không được khuyến khích. Angular và jQuery đều là những thư viện JavaScript mạnh mẽ, nhưng chúng hoạt động dựa trên hai triết lý khác nhau. Angular là một framework phát triển ứng dụng web đơn trang (SPA) mạnh mẽ, cung cấp cơ chế binding dữ liệu hai chiều, dependency injection, và nhiều tính năng khác giúp xây dựng ứng dụng web hiện đại. Trong khi đó, jQuery là một thư viện giúp đơn giản hóa việc thao tác DOM, xử lý sự kiện, và thực hiện các cuộc gọi AJAX.
Sử dụng jQuery trong một ứng dụng Angular có thể gây ra một số vấn đề:
Hiệu suất: Angular đã được tối ưu hóa để thao tác DOM một cách hiệu quả thông qua cơ chế binding và rendering của nó. Việc thêm jQuery vào có thể làm giảm hiệu suất ứng dụng do việc thao tác DOM không cần thiết và trùng lặp.
Phong cách lập trình: Angular sử dụng TypeScript và hướng đến việc phát triển ứng dụng theo mô hình component. Việc sử dụng jQuery, vốn dựa trên việc thao tác trực tiếp DOM, có thể làm mất đi lợi ích của mô hình phát triển này và làm cho mã nguồn trở nên khó bảo trì hơn.
Xung đột: Angular và jQuery đều có cách quản lý DOM và sự kiện riêng, việc sử dụng chúng cùng một lúc có thể dẫn đến xung đột và lỗi không mong muốn.
Tuy nhiên, trong một số trường hợp cụ thể, bạn có thể cần sử dụng một plugin jQuery nào đó không có sẵn dưới dạng Angular. Trong trường hợp này, bạn có thể tích hợp jQuery vào ứng dụng Angular của mình, nhưng cần phải cẩn thận để tránh các vấn đề nêu trên. Một cách tiếp cận là sử dụng jQuery trong các directive Angular, nơi bạn có thể kiểm soát chặt chẽ việc thao tác DOM và đảm bảo rằng nó không ảnh hưởng đến phần còn lại của ứng dụng Angular.
Nói chung, mặc dù có thể kỹ thuật, nhưng việc sử dụng jQuery trong Angular không phải là một thực hành tốt và nên tránh nếu có thể.
Citations:
[1]
https://viblo.asia/p/14-jquery-live-search-plugins-Eb85oBY0l2G
[2]
https://code.tutsplus.com/vi/getting-started-with-a-react-native-app-template--cms-27957t
[3]
https://learn.microsoft.com/vi-vn/aspnet/core/client-side/spa/angular?view=aspnetcore-6.0
[4]
https://github.com/minhhungit/github-action-rss-crawler/blob/master/index.html
[5]
https://webdesign.tutsplus.com/vi/ch%E1%BB%8Dn-color-scheme-b%E1%BA%A3ng-mau-c%E1%BB%A7a-rieng-b%E1%BA%A1n--webdesign-13294a
Các hàm tạo Observable là những hàm được sử dụng để tạo ra một Observable, đây là một khái niệm cơ bản trong lập trình phản ứng (Reactive Programming) sử dụng thư viện RxJS. Observable là những đối tượng cho phép bạn làm việc với các chuỗi dữ liệu hoặc sự kiện theo cách phản ứng, tức là bạn có thể định nghĩa cách xử lý dữ liệu hoặc sự kiện khi chúng xảy ra mà không cần phải lo lắng về việc chúng xảy ra khi nào. Các hàm tạo Observable cung cấp các phương thức để tạo ra các Observable từ các nguồn dữ liệu khác nhau.
Một số hàm tạo Observable phổ biến bao gồm:
Rx.Observable.create hoặc sử dụng constructor trực tiếp để tạo
Observable từ một hàm subscribe. Hàm subscribe này nhận vào một observer và
thông qua observer này, bạn có thể gửi các giá trị, thông báo lỗi hoặc hoàn
thành Observable[1][2][3].of, from, interval là các operator
được sử dụng để tạo mới một Observable từ các giá trị cố định, từ một mảng
các giá trị, hoặc tạo một chuỗi các giá trị tăng dần theo khoảng thời gian
nhất định[1][2].Observable.fromArray cho phép tạo Observable từ một mảng các
giá trị. Các phần tử trong mảng sẽ lần lượt được emit theo thứ tự, sau đó
Observable sẽ kết thúc[4].Observable.range tạo ra một Observable với giá trị ban đầu và
số lượng các element tuần tự được tạo ra, sau đó sẽ kết thúc[4].Observable.empty tạo ra một Observable không có bất kỳ element
nào cả và chỉ emit ra sự kiện hoàn thành[4].Những hàm tạo này giúp linh hoạt trong việc tạo ra các Observable phù hợp với nhu cầu xử lý dữ liệu hoặc sự kiện cụ thể trong ứng dụng.
Citations:
[1]
https://www.tiepphan.com/rxjs-reactive-programming/
[2]
https://viblo.asia/p/rxjs-va-reactive-programming-63vKj6oxK2R
[3]
https://kungfutech.edu.vn/bai-viet/angular/gioi-thieu-ve-rxjs
[4]
https://viblo.asia/p/observable-la-gi-cach-tao-ra-observable-bWrZnrRbZxw
[5]
https://viiiprock.com/blog/mot-thoang-observable-649f5140df5a14d29536d97b
[6]
https://vtitech.vn/tim-hieu-ve-rxandroid-phan-1-creating-observables/
[7]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day019-intro-rxjs-observable.md
[8]
https://kungfutech.edu.vn/bai-viet/angular/rxjs-creation-operators
Tham số truy vấn (query parameters) thường được sử dụng trong URL
để lọc hoặc sắp xếp dữ liệu, hoặc để truyền thông tin không cần thiết cho việc
xác định một tài nguyên cụ thể trên máy chủ. Chúng thường xuất hiện sau dấu hỏi
(?) và được phân cách bởi dấu và (&). Ví dụ:
http://example.com/posts?sort=asc&category=science.
Tham số ma trận (matrix parameters) cũng là một cách để truyền
thông tin trong URL nhưng không phổ biến như tham số truy vấn. Tham số ma trận
được phân cách bởi dấu chấm phẩy (;) và có thể xuất hiện ở bất kỳ đâu trong
đường dẫn của URL, không chỉ sau dấu hỏi. Ví dụ:
http://example.com/posts;sort=asc;category=science.
Tham số ma trận có thể hữu ích trong các trường hợp cụ thể như khi cần truyền tham số cho một phần cụ thể của đường dẫn hoặc khi cần tránh sự nhầm lẫn với các tham số truy vấn. Tuy nhiên, do không phải tất cả các máy chủ web và framework đều hỗ trợ tham số ma trận, nên chúng ít được sử dụng hơn so với tham số truy vấn.
Citations:
[1]
https://www.icantech.vn/kham-pha/tham-so-la-gi
[2]
http://tailieuso.udn.vn/bitstream/TTHL_125/6387/1/NguyenThiThuSuong.TT.pdf
[3]
https://vted.vn/tin-tuc/cac-dang-toan-ve-ma-tran-nghich-dao-va-phuong-phap-giai-6124.html
[4]
https://support.microsoft.com/vi-vn/topic/d%C3%B9ng-tham-s%E1%BB%91-%C4%91%E1%BB%83-y%C3%AAu-c%E1%BA%A7u-%C4%91%E1%BA%A7u-v%C3%A0o-khi-ch%E1%BA%A1y-m%E1%BB%99t-truy-v%E1%BA%A5n-c2806d3d-d500-45a8-8507-ec6af351b6ed
[5]
https://viblo.asia/p/bai-8-su-dung-mang-lam-tham-so-cua-ham-RQqKLRd4l7z
[6]
https://www.elcom.com.vn/truy-van-co-so-du-lieu-dong-vai-tro-gi-trong-quan-ly-co-so-du-lieu-1687405965
[7]
https://www.hostinger.vn/huong-dan/query-la-gi-giai-thich-ve-truy-van-database/
[8]
https://support.microsoft.com/vi-vn/office/t%E1%BA%A1o-truy-v%E1%BA%A5n-tham-s%E1%BB%91-trong-truy-v%E1%BA%A5n-microsoft-c67d9af7-c8a0-4bf7-937c-087cb25f7ad3
[9]
https://maths.uel.edu.vn/Resources/Docs/SubDomain/maths/TOAN%20CAO%20CAP%20CHAPTER%201%20VER1.pdf
[10]
https://dominhhai.github.io/vi/2017/09/what-is-matrix/
[11]
https://rdsic.edu.vn/blog/toan/tim-hieu-ve-giai-he-phuong-trinh-tuyen-tinh-co-tham-so-m-vi-cb.html
[12]
https://vted.vn/tin-tuc/cac-dang-toan-ve-hang-cua-ma-tran-va-phuong-phap-giai-4791.html
[13]
https://rpubs.com/phamdinhkhanh/333308
[14]
https://codelearn.io/sharing/ma-tran-co-ban-voi-thu-vien-numpy
[15]
https://quantrimang.com/cong-nghe/tao-truy-van-tham-so-trong-access-2016-159866
[16]
https://www.vietjack.com/tin-hoc-11-cd/cau-hoi-2-trang-155-tin-hoc-11-thud.jsp
[17]
https://vi.wikipedia.org/wiki/Ma_tr%E1%BA%ADn_%28to%C3%A1n_h%E1%BB%8Dc%29
[18]
https://congan.backan.gov.vn/tin-hoc-van-phong/truy-van-tham-so-parameter-query-trong-access-2016-38858.html
[19]
https://www.youtube.com/watch?v=wdD1y4UcXxo
[20]
https://blog.hocexcel.online/cach-tao-cau-truy-van-tham-trong-access-2016.html
Nhóm của Google đã chọn sử dụng Incremental DOM thay vì Virtual DOM với mục tiêu chính là tối ưu hiệu suất ứng dụng trên các thiết bị di động. Điều này chủ yếu liên quan đến việc tối ưu hóa kích thước gói tin (bundle size) và dấu chân bộ nhớ (memory footprint) của ứng dụng. Để đạt được hai mục tiêu này, động cơ render (rendering engine) phải có khả năng tree shaking, tức là có thể loại bỏ những phần không sử dụng trong quá trình xây dựng ứng dụng, và động cơ render phải có dấu chân bộ nhớ thấp[2][6].
Incremental DOM có dấu chân bộ nhớ thấp vì nó không cần bất kỳ bộ nhớ nào để render lại view nếu không có sự thay đổi nào trong DOM. Chỉ khi nào các nút DOM được thêm vào hoặc loại bỏ, bộ nhớ mới được phân bổ, và kích thước của phân bổ này tỷ lệ thuận với kích thước của sự thay đổi DOM. Vì hầu hết các lần gọi render/template không thay đổi gì (hoặc thay đổi rất ít), điều này có thể dẫn đến việc tiết kiệm bộ nhớ đáng kể[2][6].
Ngoài ra, khi sử dụng Incremental DOM, framework không giải thích (interpret) component. Thay vào đó, component tham chiếu đến các hướng dẫn. Nếu nó không tham chiếu đến một hướng dẫn cụ thể nào, hướng dẫn đó sẽ không bao giờ được sử dụng. Và vì chúng ta biết điều này ngay từ thời điểm biên dịch, chúng ta có thể loại bỏ hướng dẫn không sử dụng khỏi gói tin. Trong khi đó, Virtual DOM yêu cầu một trình giải thích và không biết phần nào của trình giải thích cần thiết và phần nào không cần thiết tại thời điểm biên dịch, do đó chúng ta phải gửi toàn bộ trình giải thích đến trình duyệt[2][6].
Citations:
[1]
https://www.phongvanit.com/cau-hoi/phan-biet-real-dom-va-virtual-dom--101386
[2]
https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36?gi=a6da80e693cf
[3]
https://blog.bitsrc.io/incremental-vs-virtual-dom-eb7157e43dca?gi=61db2a3b4b0f
[4]
https://codegym.vn/blog/tim-hieu-ve-virtual-dom-va-cach-hoat-dong/
[5]
https://viblo.asia/p/hieu-sao-ve-virtual-dom-trong-reactjs-bWrZngDblxw
[6]
https://www.linkedin.com/pulse/incremental-dom-virtual-angular-ivy-akhil-kumar
[7]
https://viblo.asia/p/cau-hoi-the-ky-virtual-dom-la-gi-va-cach-tao-ra-no-Ny0VGddy4PA
[8]
https://viblo.asia/p/virtual-dom-and-dom-so-sanh-co-che-thao-tac-dom-giua-react-va-angular-07LKXjdklV4
[9]
https://www.reddit.com/r/reactjs/comments/mo4g0t/why_virtual_dom_is_considered_faster_that/
[10]
https://vngeeks.com/khac-nhau-giua-virtual-dom-vs-dom/
[11]
https://www.youtube.com/watch?v=OhMTK-kBGYo
[12]
https://www.youtube.com/watch?v=Xh0fvn_gUKQ
Sự khác biệt chính giữa BehaviorSubject và Observable trong RxJS nằm ở cách chúng xử lý và phát dữ liệu tới các observer (người quan sát). Dưới đây là một số điểm khác biệt cụ thể:
Observable là một khái niệm cơ bản trong RxJS, nó đại diện cho một chuỗi các sự kiện hoặc giá trị theo thời gian mà bạn có thể "subscribe" (đăng ký) để nhận thông báo khi có sự kiện mới. Observable có thể được tạo từ nhiều nguồn, như sự kiện từ DOM, HTTP requests, hoặc bất kỳ dữ liệu asynchrony nào khác. Mỗi lần một observer subscribe tới một Observable, nó sẽ tạo ra một execution mới của Observable đó, có nghĩa là dữ liệu có thể được tạo và phát lại từ đầu cho mỗi subscriber[1].
BehaviorSubject là một biến thể của Subject, một loại Observable đặc biệt cho phép multicast (phát sóng đa hướng) giá trị tới nhiều observer cùng một lúc. Điểm đặc biệt của BehaviorSubject là nó luôn giữ một giá trị "hiện tại", và khi có một observer mới subscribe, BehaviorSubject sẽ ngay lập tức phát giá trị hiện tại đó tới observer mới. Điều này đảm bảo rằng tất cả các observer luôn có được dữ liệu mới nhất ngay cả khi chúng subscribe sau khi dữ liệu đã được phát[1].
BehaviorSubject thích hợp sử dụng trong các tình huống mà bạn muốn đảm bảo rằng mọi observer đều có thể nhận được giá trị mới nhất ngay cả khi chúng subscribe tại một thời điểm sau, ví dụ như trong việc chia sẻ trạng thái ứng dụng hoặc dữ liệu người dùng giữa các thành phần trong một ứng dụng Angular[1][3].
Một điểm khác biệt nữa là Observable là "cold" trong khi BehaviorSubject là "hot". "Cold" Observable tạo ra dữ liệu mới cho mỗi subscriber, trong khi "hot" Observable như BehaviorSubject chia sẻ cùng một luồng dữ liệu cho tất cả các subscriber, điều này giúp tiết kiệm tài nguyên và đảm bảo tính nhất quán của dữ liệu[1].
Tóm lại, BehaviorSubject và Observable đều là những công cụ mạnh mẽ trong RxJS với những ứng dụng và mục đích sử dụng khác nhau. Việc lựa chọn giữa chúng phụ thuộc vào nhu cầu cụ thể của ứng dụng bạn đang phát triển.
Citations:
[1]
https://stackoverflow.com/questions/39494058/what-is-the-difference-between-behaviorsubject-and-observable
[2]
https://viblo.asia/p/subject-trong-rxjs-Do754DvX5M6
[3]
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day026-rxjs-subject-multicast.md
[4]
https://viblo.asia/p/flutter-rxdart-phan-biet-phan-biet-behaviorsubject-publishsubjectreplaysubject-Qpmlew17Krd
[5]
https://ant.ncc.asia/su-dung-subjects-va-behaviorsubjects-trong-angular/
[6]
https://topdev.vn/blog/rxswift-9-subjects/
[7]
https://www.youtube.com/watch?v=ACIKyrzacTk
[8]
https://kungfutech.edu.vn/bai-viet/angular/rxjs-subject-multicasting
SystemJS và webpack là hai công cụ phổ biến được sử dụng trong việc quản lý và gói các module JavaScript. Dưới đây là một số điểm khác biệt chính giữa chúng:
Khi lựa chọn giữa SystemJS và webpack, cần xem xét đến các yếu tố như kích thước và độ phức tạp của dự án, yêu cầu về hiệu suất, và sự thoải mái của nhà phát triển với công cụ[2].
Citations:
[1]
https://stackshare.io/stackups/system-js-vs-webpack
[2]
https://www.geeksforgeeks.org/difference-between-systemjs-and-webpack/
[3]
https://stackoverflow.com/questions/38263406/what-are-differences-between-systemjs-and-webpack
[4]
https://vteams.com/blog/systemjs-vs-webpack/
[5]
https://github.com/systemjs/systemjs
[6]
https://www.reddit.com/r/Angular2/comments/4lbdys/webpack_vs_systemjs_pros_cons/?rdt=47038
[7]
https://www.npmjs.com/package/systemjs-webpack-interop/v/1.1.1
[8]
https://single-spa.js.org/docs/recommended-setup/
[9]
https://github.com/systemjs/systemjs/issues/2092
[10]
https://webpack.js.org/comparison/
[11]
https://www.npmpeer.dev/packages/systemjs-webpack-interop/compatibility
[12]
https://www.youtube.com/watch?v=ahRNMEA4mWw
[13]
https://www.cnblogs.com/dhcn/p/7642618.html
[14]
https://github.com/systemjs/systemjs/issues/2360
[15]
https://davidsekar.com/angular/webpack-vs-systemjs
[16]
https://npmtrends.com/requirejs-vs-systemjs-vs-webpack
[17]
https://github.com/systemjs/systemjs/issues/2183
Incremental DOM có thể được Tree Shaking vì nó hỗ trợ việc loại bỏ các phần code không được sử dụng (dead code) trong quá trình bundling ứng dụng. Tree Shaking là một kỹ thuật tối ưu hóa hiệu suất bằng cách loại bỏ dead code, giúp giảm kích thước của bundle và tăng tốc độ tải trang. Incremental DOM, giống như Virtual DOM, là một cách tiếp cận để cải thiện hiệu suất ứng dụng bằng cách tối ưu hóa việc cập nhật DOM. Tuy nhiên, khác biệt chính giữa Incremental DOM và Virtual DOM là Incremental DOM cập nhật trực tiếp trên DOM thực tế bằng cách áp dụng các thay đổi một cách tuần tự, trong khi Virtual DOM sử dụng một bản sao ảo của DOM để quản lý các thay đổi.
Trong ngữ cảnh của Tree Shaking, Incremental DOM có thể được tối ưu hóa tốt hơn vì nó cho phép các công cụ bundling như Webpack phát hiện và loại bỏ các phần code không được sử dụng dựa trên việc phân tích các module và dependencies. Điều này là do Incremental DOM thường được sử dụng thông qua các module ES6, cho phép các công cụ này dễ dàng xác định và loại bỏ dead code. Điều này giúp giảm kích thước của bundle cuối cùng và cải thiện hiệu suất tải trang.
Tuy nhiên, cần lưu ý rằng khả năng Tree Shaking của Incremental DOM cũng phụ thuộc vào cách nó được sử dụng và cấu hình trong dự án. Để tối ưu hóa việc Tree Shaking, các nhà phát triển cần đảm bảo rằng họ sử dụng các module ES6 và cấu hình đúng cách các công cụ bundling như Webpack.
Citations:
[1]
https://nkthanh.dev/posts/tree-shaking
[2]
https://nkthanh.dev/posts/tree-shaking-cho-ung-dung-web
[3]
https://labs.flinters.vn/react-js/tai-sao-react-su-dung-virtual-dom/
[4]
https://viblo.asia/p/he-thong-cham-u-ap-dung-ngay-nhung-ky-thuat-nay-phan-1-0gdJz7D3Lz5
[5]
https://kb.pavietnam.vn/dom-la-gi.html/amp
[6]
https://topdev.vn/blog/tang-toc-website/
[7]
https://developer.android.com/studio/build/shrink-code?hl=vi
[8]
https://codegym.vn/blog/tim-hieu-ve-virtual-dom-va-cach-hoat-dong/
[9]
https://viblo.asia/p/virtual-dom-and-dom-so-sanh-co-che-thao-tac-dom-giua-react-va-angular-07LKXjdklV4
[10]
https://topdev.vn/blog/dom-la-gi/
[11]
https://tuduydongian.com/2017/09/optimize-webpack-bundle/
[12]
https://vi.legacy.reactjs.org/docs/faq-internals.html
[13]
https://vngeeks.com/khac-nhau-giua-virtual-dom-vs-dom/
[14]
https://viblo.asia/p/hieu-sao-ve-virtual-dom-trong-reactjs-bWrZngDblxw
[15]
https://codestus.com/posts/react-virtual-dom-duoc-hieu-nhu-the-nao
[16]
https://www.phongvanit.com/ky-nang/angular-1016
[17]
https://anonystick.com/blog-developer/javascript-tree-shaking-2021071810286758
[18]
https://viblo.asia/p/proper-tree-shaking-with-webpack-2-3P0lPOM4Zox
Angular sử dụng phân đoạn URL để xác định các thành phần cụ thể của đường dẫn trong một URL, từ đó cho phép ứng dụng điều hướng và hiển thị nội dung phù hợp với địa chỉ URL mà người dùng truy cập. Mỗi phân đoạn URL tương ứng với một view hoặc component khác nhau trong ứng dụng Angular. Khi người dùng chuyển từ trang này sang trang khác, Angular sẽ sử dụng các phân đoạn URL để xác định component cần được tải và hiển thị, cũng như truyền dữ liệu qua các tham số trên URL nếu cần thiết[1][2].
Ví dụ, trong một ứng dụng có đường dẫn
/phones/:id/edit, phân đoạn phones có thể tương ứng
với một danh sách điện thoại, trong khi :id là một biến định danh
cho một điện thoại cụ thể, và edit chỉ ra rằng người dùng đang
trong trạng thái chỉnh sửa thông tin của điện thoại đó. Sử dụng phân đoạn URL
giúp Angular xác định chính xác component ItemFormComponent cần
được tải để người dùng có thể chỉnh sửa thông tin[2].
Citations:
[1]
https://viblo.asia/p/route-in-angular-js-V3m5WWkw5O7
[2]
https://viblo.asia/p/co-ban-ve-router-trong-angular-2-63vKjn7yK2R
[3]
https://topdev.vn/blog/top-20-api-trong-ai-va-machine-learning-ban-nen-biet/
[4]
https://itnavi.com.vn/blog/cau-hoi-phong-van-reactjs
[5]
https://topdev.vn/blog/streaming-media-voi-nginx-va-nginx-rtmp-module/
[6]
https://www.academia.edu/11333498/Do_an_ddos_va_cach_phong_chong_9052
[7]
https://www.academia.edu/41264551/IT3080_Tai_lieu_thuc_hanh
[8]
https://dost.hochiminhcity.gov.vn/documents/1516/2.YSC2022_Proceeding%C4%90-%C4%90T-CNTT.pdf
Trong AngularJS, $scope.emit() và $scope.broadcast() là hai phương thức quan trọng được sử dụng để giao tiếp giữa các thành phần trong ứng dụng thông qua cơ chế xuất bản/đăng ký (publish/subscribe). Tuy nhiên, khi chuyển sang Angular (phiên bản 2 trở lên), cơ chế giao tiếp giữa các thành phần đã thay đổi đáng kể và không còn sử dụng $scope như trong AngularJS.
Angular sử dụng một hệ thống giao tiếp dựa trên các dịch vụ (services) và EventEmitter để thay thế cho $scope.emit() và $scope.broadcast(). Cụ thể, để giao tiếp giữa các thành phần không có mối quan hệ trực tiếp (ví dụ như cha-con, anh em), Angular khuyến khích sử dụng các dịch vụ có thể chứa EventEmitter. Các thành phần có thể đăng ký lắng nghe sự kiện từ EventEmitter này và phát ra sự kiện khi cần thông qua phương thức emit() của EventEmitter.
Ví dụ, trong Angular, bạn có thể tạo một dịch vụ giao tiếp như sau:
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class CommunicationService {
eventEmitter: EventEmitter<any> = new EventEmitter();
sendEvent(data: any) {
this.eventEmitter.emit(data);
}
}
Các thành phần khác có thể đăng ký lắng nghe sự kiện từ dịch vụ này và phản ứng tương ứng:
import { Component, OnInit } from '@angular/core';
import { CommunicationService } from './communication.service';
@Component({
selector: 'app-receiver',
template: `<p>Received event: {{ eventData }}</p>`,
})
export class ReceiverComponent implements OnInit {
eventData: any;
constructor(private communicationService: CommunicationService) {}
ngOnInit() {
this.communicationService.eventEmitter.subscribe((data) => {
this.eventData = data;
});
}
}
Như vậy, trong Angular, không còn các phương thức $scope.emit() và $scope.broadcast() như trong AngularJS. Thay vào đó, Angular sử dụng EventEmitter và các dịch vụ để thực hiện giao tiếp giữa các thành phần[4].
Citations:
[1]
https://amitthakkar.github.io/emit-vs-broadcast/
[2]
https://stackoverflow.com/questions/26752030/rootscope-broadcast-vs-scope-emit
[3]
https://ultimatecourses.com/blog/all-about-angulars-emit-broadcast-on-publish-subscribing
[4]
https://groups.google.com/g/angular/c/1iSwhoUIvnE
[5]
https://www.codeproject.com/Questions/1113865/Emit-and-broadcast-in-angular
[6]
https://github.com/viphat/til/issues/4
[7]
https://freetuts.net/rootscope-broadcast-va-emit-trong-angularjs-5894.html
View Engine và Ivy là hai động cơ render trong Angular, một framework phát triển ứng dụng web phổ biến. Mỗi động cơ có những đặc điểm và lợi ích riêng biệt.
View Engine là động cơ render trước đây của Angular. Nó được thiết kế để tạo ra các ứng dụng web hiệu quả và nhanh chóng. Tuy nhiên, một số nhược điểm của View Engine bao gồm kích thước bundle lớn và thời gian biên dịch chậm, điều này có thể ảnh hưởng đến hiệu suất ứng dụng.
Ivy là động cơ render thế hệ mới của Angular, được giới thiệu lần đầu tiên trong Angular 8 như một chức năng tùy chọn và trở thành mặc định từ Angular 9 trở đi[1][3][4]. Ivy mang lại nhiều cải tiến so với View Engine, bao gồm:
Khi so sánh View Engine và Ivy, có thể thấy rằng Ivy mang lại nhiều lợi ích vượt trội so với View Engine, bao gồm kích thước bundle nhỏ hơn, thời gian biên dịch nhanh hơn và tính tương thích tốt hơn. Sự chuyển đổi từ View Engine sang Ivy là một bước tiến quan trọng trong việc phát triển Angular, giúp tạo ra các ứng dụng web hiệu quả và hiệu suất cao hơn[1][2][3][4].
Citations:
[1]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[2]
https://chriskohler.dev/angular-view-engine-was-removed-what-you-need-to-know/
[3]
https://blog.vietnamlab.vn/angular-9-co-gi-moi/
[4]
https://www.angularminds.com/blog/what-is-angular-ivy
[5]
https://stackoverflow.com/questions/77069622/code-difference-between-libraries-build-in-view-engine-and-ivy
[6]
https://www.reddit.com/r/angular/comments/1avdpjb/how_can_i_know_which_libraries_uses_view_engine/
[7]
https://www.youtube.com/watch?v=cNxqFax2rpk
Biên dịch Just-in-Time (JIT) và Ahead-of-Time (AOT) là hai phương pháp biên dịch chương trình máy tính, mỗi phương pháp có những đặc điểm và ứng dụng riêng.
Tóm lại, sự lựa chọn giữa JIT và AOT phụ thuộc vào yêu cầu cụ thể của ứng dụng và môi trường thực thi. JIT mang lại lợi ích về hiệu suất động và khả năng tối ưu hóa dựa trên thông tin thực thi, trong khi AOT cung cấp khởi động nhanh và hiệu suất ổn định ngay từ đầu.
Citations:
[1]
https://www.reddit.com/r/dotnet/comments/zoxhkp/aot_vs_jit_in_net/
[2]
https://www.azul.com/blog/jit-performance-ahead-of-time-versus-just-in-time/
[3]
https://stackoverflow.com/questions/7591169/why-is-it-hard-to-beat-aot-compiler-with-a-jit-compiler-in-terms-of-app-perfor
[4]
https://www.linkedin.com/pulse/ahead-of-time-compilation-vs-just-in-time-java-comparative-raj
[5]
https://www.linkedin.com/pulse/compilation-techniques-jit-vs-aot-divyansh-pandey-c2nzf
[6]
https://www.reddit.com/r/Compilers/comments/19ctf7p/aot_vs_jit_comilation/
[7]
https://stackoverflow.com/questions/41450226/just-in-time-jit-vs-ahead-of-time-aot-compilation-in-angular
[8]
https://www.monarch-innovation.com/aot-vs-jit-compiler-in-angular
[9]
https://www.geeksforgeeks.org/what-is-aot-and-jit-compiler-in-angular/
[10]
https://www.infoq.com/presentations/jit-aot-tradeoffs/
[11]
https://www.ittc.ku.edu/~kulkarni/CARS/papers/pgo.pdf
[12]
https://www.cesarsotovalero.net/blog/aot-vs-jit-compilation-in-java.html
[13]
https://angular.io/guide/aot-compiler
Locality principle trong Ivy là một nguyên tắc mà đội ngũ phát triển Angular đã áp dụng để đơn giản hóa công việc của các nhà phát triển. Cụ thể, nguyên tắc này có nghĩa là mỗi thành phần (component) nên được biên dịch sử dụng chỉ thông tin của riêng nó. Điều này giúp việc biên dịch nhanh hơn bởi vì chỉ cần thông tin về chính thành phần đó, không cần thông tin về các phụ thuộc khác. Trong mô hình Ivy, Angular không cần metadata của bất kỳ phụ thuộc khai báo nào để biên dịch một thành phần. Điều này dẫn đến việc xây dựng nhanh hơn và cũng cho phép tạo ra các Directives hoặc Components tại thời điểm chạy (runtime)[1][2][3][4][5][6][7].
Citations:
[1]
https://www.etatvasoft.com/insights/why-ivy-engine-is-center-of-attraction/
[2]
https://www.angularminds.com/blog/what-is-angular-ivy
[3]
https://www.cleverti.com/blog/angular/angular-ivy-the-new-angular-renderer-explained/
[4]
https://borstch.com/blog/development/angulars-ivy-renderer-what-you-need-to-know
[5]
https://dev.to/this-is-angular/the-angular-ivy-guide-for-library-authors-9md
[6]
https://angularindepth.com/posts/1062/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection
[7]
https://www.bytestechnolab.com/blog/angular-ivy-a-detailed-walk-through-ivy-compiler-for-angular-development/
Có, bạn có thể chạy AngularJS và Angular cùng một lúc bằng cách sử
dụng kỹ thuật nâng cấp (upgrade technique) mà Angular cung cấp. Điều này cho
phép bạn tận dụng cả hai framework trong một ứng dụng duy nhất và từ từ chuyển
đổi từ AngularJS sang Angular. Để thực hiện việc này, bạn sẽ cần sử dụng gói
@angular/upgrade để thiết lập một cấu trúc cho phép hai framework
hoạt động cùng nhau.
Trong quá trình nâng cấp, bạn có thể bắt đầu bằng cách bọc các thành phần AngularJS dưới dạng các directive Angular và sau đó chèn chúng vào trong các template của Angular. Bạn cũng có thể sử dụng AngularJS routing và từ từ chuyển sang sử dụng Angular Router. Điều quan trọng là phải đảm bảo rằng các dịch vụ và các phần phụ thuộc được chia sẻ một cách thích hợp giữa hai phiên bản framework để đảm bảo tính nhất quán và dễ dàng quản lý.
Ngoài ra, bạn cần lưu ý về việc quản lý chu kỳ đời sống của các thành phần và đảm bảo rằng việc nâng cấp không làm ảnh hưởng đến hiệu suất của ứng dụng. Việc chạy cùng lúc cả hai framework có thể là một thách thức và đòi hỏi sự cẩn thận trong quá trình triển khai và kiểm thử.
Citations:
[1]
https://itviec.com/blog/angular-la-gi/
[2]
https://itbeesolutions.vn/angular-la-gi-angular-va-angularjs-co-giong-nhau-khong/
[3]
https://vn.got-it.ai/blog/angular-la-gi-su-khac-biet-giua-angular-va-angularjs
[4]
https://topdev.vn/blog/angularjs-la-gi/
[5]
https://tothost.vn/angular-la-gi/
[6]
https://devwork.vn/blog/phong-van-angularjs
[7]
https://vietnix.vn/angular-la-gi/
[8]
https://viblo.asia/p/angular-bai-2-in-out-trong-angularjs-mrDGMbyOezL
[9]
https://nhanhoa.com/tin-tuc/angular-la-gi.html
[10]
https://www.guru99.com/vi/angular-js-interview-questions.html
[11]
https://itnavi.com.vn/blog/cau-hoi-phong-van-angular
[12]
http://dongdiemthuy.github.io/javascript/angularjs/2014/10/19/controller-trong-angularjs.html
[13]
https://viblo.asia/p/tim-hieu-angular-tao-project-sample-angular-RQqKLeprZ7z
[14]
https://glints.com/vn/blog/cau-hoi-phong-van-angular-va-cach-tra-loi/
[15]
https://www.linkedin.com/pulse/20-c%C3%A2u-h%E1%BB%8Fi-ph%E1%BB%8Fng-v%E1%BA%A5n-th%C6%B0%E1%BB%9Dng-g%E1%BA%B7p-v%E1%BB%81-angular-8-niit-ict-h%C3%A0-n%E1%BB%99i
[16]
https://viblo.asia/p/cung-tim-hieu-kien-truc-cua-angular-2-va-su-khac-nhau-ve-kien-truc-giua-angular-1-va-angular-2-gGJ592qpKX2
[17]
https://tanca.io/blog/bo-cau-hoi-phong-van-angular-duoc-dung-nhieu-nhat
[18]
https://www.reddit.com/r/Angular2/comments/7zhs9v/reasons_to_use_angular_over_angularjs/?rdt=49494
[19]
https://stackoverflow.com/questions/43523907/running-angular-and-angularjs-frameworks-side-by-side
[20]
https://topdev.vn/blog/top-10-cau-hoi-phong-van-angularjs-developer-co-dan-an-chi-tiet/
Trong AngularJS, $watch được sử dụng để theo dõi sự
thay đổi của biến hoặc biểu thức. Khi chuyển sang Angular (phiên bản 2 trở lên),
cơ chế này không còn được sử dụng nữa do cách tiếp cận khác biệt trong việc quản
lý dữ liệu và phát hiện thay đổi. Angular sử dụng một mô hình phát hiện thay đổi
dựa trên zone.js để tự động phát hiện khi một mô hình dữ liệu thay đổi và cập
nhật giao diện người dùng một cách hiệu quả.
Tuy nhiên, nếu muốn tìm một cách thức tương đương với
$watch trong Angular, có thể sử dụng các cơ chế sau:
Property Binding và Event Binding: Đây là cách cơ bản
nhất để tương tác với dữ liệu và giao diện người dùng, giúp cập nhật dữ
liệu một cách tự động mà không cần sử dụng $watch.
Services và RxJS Observables: Angular khuyến khích sử dụng services kết hợp với RxJS Observables để quản lý và theo dõi các luồng dữ liệu. Observables cung cấp một cách mạnh mẽ để làm việc với các sự kiện và dữ liệu bất đồng bộ, cho phép bạn tạo ra các luồng dữ liệu có thể được "subscribe" để phản ứng lại với sự thay đổi.
NgModel: Trong các trường hợp cụ thể, như làm việc với
form, NgModel có thể được sử dụng để tạo một two-way
binding giữa các thành phần của form và dữ liệu, cho phép tự động cập
nhật dữ liệu khi người dùng nhập vào.
@Input và @Output Decorators: Trong Angular, để tạo sự
tương tác giữa các component, bạn có thể sử dụng @Input và
@Output decorators để truyền dữ liệu vào component (input)
và phát ra sự kiện từ component (output), tương tự như cách
$watch hoạt động trong AngularJS.
Tóm lại, trong Angular không có chức năng chính xác tương đương
với $watch của AngularJS, nhưng có nhiều cơ chế và công cụ khác
nhau giúp quản lý và theo dõi sự thay đổi dữ liệu một cách hiệu quả.
Citations:
[1]
https://daotaotester.com/typescript-la-gi-tim-hieu-nhanh-trong-2-phut/
[2]
https://viblo.asia/p/bai-9-chia-ung-dung-thanh-component-va-giao-tiep-giua-cac-component-trong-vuejs-jvEla4WNZkw
[3]
https://topdev.vn/blog/angular-tu-xay-dung-module-lazy-load-images/
[4]
https://itviec.com/blog/huong-dan-viet-mau-cv-an-tuong-cho-it/
[5]
https://devwork.vn/tai-lieu-mien-phi/147/tai-lieu-huong-dan-lap-trinh-vuejs-co-ban
[6]
https://viblo.asia/helps/cach-su-dung-markdown-bxjvZYnwkJZ
[7]
https://teky.edu.vn/blog/mean-stack-la-gi-2/
[8]
https://kienchu.blogspot.com/?m=1
Trong Angular 9, Tree Shaking đã được cải thiện đáng kể nhờ vào việc giới thiệu Ivy, bộ biên dịch và thời gian chạy mới của Angular. Tree Shaking là một thuật ngữ thường được sử dụng trong ngữ cảnh JavaScript để chỉ việc loại bỏ mã chết, hay cụ thể hơn là nhập khẩu mã sống. Cải tiến này giúp loại bỏ các phần của Angular không được sử dụng thông qua việc Tree Shaking và tạo ra ít mã hơn cho mỗi thành phần Angular[1][3][4][5].
Ivy cung cấp khả năng phân tích tĩnh tốt hơn, giúp loại bỏ mã chết một cách hiệu quả hơn trong quá trình xây dựng ứng dụng. Điều này dẫn đến việc giảm kích thước gói ứng dụng, đặc biệt là đối với các ứng dụng nhỏ và lớn. Các ứng dụng nhỏ có thể hưởng lợi nhiều nhất từ Tree Shaking, trong khi các ứng dụng lớn có thể hưởng lợi nhiều nhất từ việc giảm kích thước của các nhà máy sản xuất. Các ứng dụng cỡ trung bình sẽ thấy kích thước gói của họ tương đương hoặc hơi nhỏ hơn, vì chúng hưởng ít lợi từ Tree Shaking và không có đủ thành phần để tận dụng triệt để việc giảm kích thước nhà máy sản xuất[3].
Ngoài ra, Ivy phá vỡ các chức năng thành các chức năng nhỏ hơn và cụ thể hơn, làm cho mã nguồn renderer trở nên thân thiện hơn với Tree Shaking. Điều này có nghĩa là bạn không còn phải gửi đi toàn bộ mã nguồn của framework nữa, thay vào đó chỉ cần gói những phần của chức năng framework mà bạn sử dụng[1].
Các cải tiến khác bao gồm việc loại bỏ yêu cầu về entryComponents, vì các thành phần này sẽ được phát hiện và biên dịch tự động thông qua việc sử dụng chúng, cũng như cải thiện quá trình quốc tế hóa (i18n) bằng cách di chuyển các thay thế i18n trong quá trình xây dựng để làm cho quá trình này nhanh hơn đến 10 lần[3].
Tóm lại, những cải tiến trong Tree Shaking của Angular 9 giúp tối ưu hóa hiệu suất ứng dụng bằng cách giảm kích thước gói ứng dụng và loại bỏ mã không sử dụng, qua đó cung cấp trải nghiệm người dùng tốt hơn và thời gian tải trang nhanh hơn.
Citations:
[1]
https://www.bestinterviewquestion.com/question/explain-the-improvements-of-tree-shaking-in-angular-9-ggrbx5883ms
[2]
https://stackoverflow.com/questions/45884414/what-is-tree-shaking-and-why-would-i-need-it
[3]
https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3?gi=9fae30f19fc4
[4]
https://www.c-sharpcorner.com/article/minification-and-tree-shaking-in-angular/
[5]
https://www.ifourtechnolab.com/blog/what-is-angular-9-explanation-with-features-pros-cons
[6]
https://www.youtube.com/watch?v=NPsRXz5MOSg
[7]
https://angularindepth.com/posts/1258/a-gentle-introduction-into-tree-shaking-in-angular-ivy
[8]
https://www.fullstack.cafe/angular/angular-9-explain-improvements-in-tree-shaking/1000
NgZone trong Angular là một dịch vụ cho phép chúng ta thực thi mã lệnh bên trong hoặc bên ngoài Angular Zone. Việc này giúp kiểm soát quá trình phát hiện thay đổi (change detection) trong ứng dụng Angular. Dưới đây là một số ví dụ cụ thể về việc sử dụng ngZone:
Chạy mã không ảnh hưởng đến phát hiện thay đổi:
Khi bạn muốn thực hiện một hoạt động nào đó mà không muốn nó kích hoạt
quá trình phát hiện thay đổi trong cây thành phần của Angular, bạn có
thể sử dụng phương thức runOutsideAngular(). Ví dụ, bạn có
thể muốn thêm một sự kiện lắng nghe (event listener) cho việc kéo và thả
mà không muốn mỗi lần di chuyển chuột đều kích hoạt phát hiện thay
đổi[4][6].
constructor(private ngZone: NgZone) {}
mouseDown(event: any) {
this.ngZone.runOutsideAngular(() => {
window.document.addEventListener('mousemove', this.mouseMove.bind(this));
});
}
Thực thi mã bên trong Angular Zone:
Khi bạn muốn đảm bảo rằng một hoạt động cụ thể sẽ kích hoạt quá trình
phát hiện thay đổi, bạn có thể sử dụng phương thức run().
Điều này thường được sử dụng khi bạn làm việc với các API không phải của
Angular hoặc sau khi thực hiện một số hoạt động bất đồng bộ[1][5].
onClick() {
this.ngZone.run(() => {
this.message = 'World';
});
}
Tối ưu hóa hiệu suất:
Trong trường hợp bạn muốn tối ưu hóa hiệu suất bằng cách tránh việc
Angular kiểm tra thay đổi không cần thiết sau mỗi hoạt động bất đồng bộ
như gọi API hoặc xử lý sự kiện, bạn có thể sử dụng
runOutsideAngular() để thực hiện các hoạt động này mà không
kích hoạt phát hiện thay đổi[3][7].
runInZone() {
this.ngZone.runOutsideAngular(() => {
// Mã lệnh được thực thi ở đây sẽ không kích hoạt phát hiện thay đổi
});
}
Những ví dụ trên cho thấy cách ngZone được sử dụng để kiểm soát quá trình phát hiện thay đổi trong ứng dụng Angular, từ đó giúp tối ưu hóa hiệu suất và hành vi của ứng dụng.
Citations:
[1]
https://javascript.plainenglish.io/angular-zone-js-change-detection-understanding-the-core-concepts-7c78b8aa8818?gi=68c8096c712c
[2]
https://www.youtube.com/watch?v=1381WaJMQcs
[3]
https://www.youtube.com/watch?v=wQCiE8040gg
[4]
https://monsterlessons-academy.com/posts/ng-zone-angular-improve-performance-by-running-code-outside-angular
[5]
https://stackoverflow.com/questions/51455545/when-to-use-ngzone-run
[6]
https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html
[7]
https://www.youtube.com/watch?v=ZvvmfT6ol0E&t=0
[8]
https://eliteionic.com/tutorials/understanding-zones-and-change-detection-in-ionic-2-angular-2/
[9]
https://www.youtube.com/watch?v=i-gLKUmQNNI
[10]
https://angular.io/guide/zone
[11]
https://angular.io/api/core/NgZone
[12]
https://angularindepth.com/posts/1434/running-event-listeners-outside-of-the-ngzone
[13]
https://stackblitz.com/edit/ngzone-demo
Để trích xuất cấu hình webpack từ một dự án Angular CLI, bạn có thể thực hiện theo các bước sau:
angular.json để lấy thông tin cấu hình cho dự án mục
tiêu. Thông thường, bạn có thể sử dụng khóa defaultProject để
xác định dự án mặc định[1].buildOptions từ dự
án đã lấy được. Cấu trúc đầy đủ của đối tượng này được mô tả trong mã nguồn
của Angular DevKit[1].@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs
để tạo cấu hình webpack. Các hàm này bao gồm getCommonConfig,
getStylesConfig, và các hàm khác tùy thuộc vào nhu cầu của
bạn[1].entry, plugins,
v.v.[1].Lưu ý rằng kể từ Angular CLI phiên bản 6, việc sử dụng lệnh
ng eject để trích xuất cấu hình webpack đã bị loại bỏ và không còn
được hỗ trợ[6].
Thay vào đó, bạn có thể sử dụng các thư viện như
@angular-builders/custom-webpack để tùy chỉnh cấu hình webpack mà
không cần phải trích xuất nó ra một cách thủ công[4][5].
Nếu bạn chỉ muốn xem cấu hình webpack mà Angular CLI tạo ra mà không cần tùy chỉnh, bạn có thể tham khảo mã nguồn của Angular DevKit, nơi chứa các hàm tạo cấu hình webpack[3][11]. Tuy nhiên, việc này có thể khá phức tạp vì cấu hình webpack được tạo ra một cách động dựa trên nhiều yếu tố tại thời điểm xây dựng[2].
Citations:
[1]
https://github.com/Quramy/how-to-extract-webpack-conf-from-angular-cli
[2]
https://www.reddit.com/r/angular/comments/ssxq9o/is_it_possible_to_get_webpackconfigjs_for_angular/?rdt=63922
[3]
https://stackoverflow.com/questions/69797233/how-to-see-webpack-config-from-angular-application
[4]
https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config
[5]
https://developapa.com/angular-custom-webpack-configuration/
[6]
https://stackoverflow.com/questions/39187556/angular-cli-where-is-webpack-config-js-file-new-angular6-does-not-support-ng-e
[7]
https://levunguyen.com/laptrinhweb/2021/06/02/su-dung-angular-cli-tao-du-an-angular/
[8]
https://viblo.asia/p/co-gi-moi-trong-angular-11-jvEla736Kkw
[9]
https://viblo.asia/p/angular-2-angular-cli-tool-khong-the-bo-qua-khi-code-ng2-63vKjJ76K2R
[10]
https://tedu.com.vn/khoa-hoc-lap-trinh/khoa-hoc-lam-du-an-thuc-te-voi-angular-cli-va-web-api-89.html
[11]
https://github.com/angular/angular-cli/issues/13737
[12]
https://angular.io/guide/esbuild
[13]
https://github.com/Quramy/how-to-extract-webpack-conf-from-angular-cli/blob/master/angular.json
[14]
https://viblo.asia/p/cach-cau-hinh-webpack-4-voi-angular-7-huong-dan-day-du-gGJ59v01KX2
[15]
https://stackoverflow.com/questions/41549318/where-is-the-webpack-config-js-in-angular-cli-new-project/44952457
[16]
https://www.youtube.com/watch?v=-v0vD_IB6iE
Ivy, hệ thống biên dịch và rendering thế hệ mới của Angular, đã mang lại những cải tiến đáng kể về hiệu suất xây dựng và tái xây dựng ứng dụng. Cụ thể, Ivy giúp giảm kích thước của các gói (bundle) và tăng tốc độ biên dịch thông qua việc loại bỏ mã không sử dụng (tree-shaking) và biên dịch độc lập cho từng thành phần (component). Điều này không chỉ giúp giảm thời gian tải cho người dùng mà còn cải thiện trải nghiệm phát triển ứng dụng cho lập trình viên.
Theo một số nguồn thông tin từ các bài viết và thảo luận trên mạng, Ivy đã giúp cải thiện thời gian tái biên dịch (rebuild times) đáng kể, đặc biệt là khi nâng cấp lên Angular 8.2 và sau đó là Angular 9. Các bài kiểm tra hiệu suất cho thấy thời gian tái biên dịch có thể giảm từ 30-40%[1]. Đối với các dự án lớn, việc tái biên dịch với Ivy có thể nhanh hơn 10% so với ViewEngine[7]. Ngoài ra, việc biên dịch trước (AOT) giờ đây đã trở thành mặc định cho các ứng dụng Ivy, cả trong chế độ phát triển và sản xuất, giúp phát hiện lỗi biên dịch sớm hơn và cải thiện thời gian xây dựng[2][8][9].
Tuy nhiên, cũng có báo cáo về việc Ivy không mang lại hiệu suất như mong đợi trong một số trường hợp cụ thể. Một số người dùng đã gặp phải vấn đề với thời gian biên dịch ban đầu (initial compile time) rất chậm khi sử dụng Ivy[5]. Điều này có thể phụ thuộc vào cấu trúc và kích thước của dự án cũng như số lượng phụ thuộc (dependencies).
Nhìn chung, Ivy được thiết kế để cải thiện thời gian xây dựng và tái xây dựng thông qua việc tối ưu hóa và hiệu quả hóa quá trình biên dịch. Các lập trình viên có thể mong đợi thấy sự cải thiện trong quá trình phát triển ứng dụng của họ khi sử dụng Ivy, nhưng cũng cần lưu ý rằng kết quả cụ thể có thể thay đổi tùy thuộc vào từng dự án cụ thể[1][2][6][7][8][9][10][11].
Citations:
[1]
https://www.piotrl.net/angular-ivy-build-performance/
[2]
https://developer.mescius.com/blogs/build-times-bundle-sizes-angular-ivy
[3]
https://stackoverflow.com/questions/55990712/angular-ivy-really-bad-performance-benchmark
[4]
https://borstch.com/blog/development/angulars-ivy-renderer-what-you-need-to-know
[5]
https://github.com/angular/angular-cli/issues/20338
[6]
https://www.telerik.com/blogs/what-you-should-know-angular-ivy
[7]
https://github.com/angular/angular/issues/35906
[8]
https://www.angularminds.com/blog/what-is-angular-ivy
[9]
https://www.neoito.com/blog/top-6-advantages-of-the-angular-9-ivy-compiler-2/
[10]
https://www.telerik.com/blogs/angular-basics-need-know-angular-ivy
[11]
https://dev.to/eduardstefanescu/angular-ivy-performance-comparison-27m2
[12]
https://stackoverflow.com/questions/65938474/why-shouldnt-i-publish-libraries-compiled-with-ivy
[13]
https://www.albiorixtech.com/blog/angular-ivy/
[14]
https://www.bitovi.com/blog/how-to-speed-up-your-angular-builds
[15]
https://docs.angular.lat/guide/ivy
[16]
https://www.reddit.com/r/Angular2/comments/g1d96i/angular_with_ivy_build_performance_review/
[17]
https://angularindepth.com/posts/1062/ivy-engine-in-angular-first-in-depth-look-at-compilation-runtime-and-change-detection
[18]
https://www.youtube.com/watch?v=bTyt15Cnngw
[19]
https://www.youtube.com/watch?v=HRv7gKm9Q-8
[20]
https://github.com/angular/angular/issues/34796
Trong Angular 8, có một số thay đổi đáng chú ý liên quan đến module Location, bao gồm:
Cải tiến trong việc di chuyển giữa các trang: Angular 8
giới thiệu LocationUpgradeModule giúp cải thiện việc di
chuyển giữa các trang trong ứng dụng. Module này cho phép dịch vụ vị trí
thống nhất, chuyển trách nhiệm từ dịch vụ $location của
AngularJS sang Angular Location Service. Điều này giúp cải thiện trải
nghiệm cho các ứng dụng sử dụng ngUpgrade cần định tuyến
trong cả phần AngularJS và Angular của ứng dụng của họ[1].
Lazy Loading AngularJS: Angular 8 cũng đã tài liệu hóa các phương pháp hay nhất xung quanh việc lazy loading các phần của ứng dụng AngularJS từ Angular. Điều này giúp dễ dàng hơn trong việc di chuyển các tính năng được sử dụng phổ biến nhất trước tiên và chỉ tải AngularJS cho một tập hợp con của ứng dụng[1].
Cải tiến với Import() Syntax cho Lazy Loading: Angular 8
bao gồm một cách mới để khai báo các tuyến đường lazy-loading sử dụng cú
pháp TypeScript – import(). Trong phiên bản Angular mới
nhất, đây sẽ là cách ưa thích để khai báo một tuyến đường lazy-loading
và Ivy renderer chỉ hỗ trợ cách này[4].
Những thay đổi này trong module Location và cách tiếp cận lazy loading giúp cải thiện hiệu suất và trải nghiệm người dùng, đồng thời làm cho quá trình di chuyển từ AngularJS sang Angular trở nên mượt mà hơn.
Citations:
[1]
https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27?gi=ed417e5b7bf6
[2]
https://ionicframework.com/docs/angular/navigation
[3]
https://stackoverflow.com/questions/56371145/how-to-update-module-on-generating-services-in-angular8-in-angular-cli
[4]
https://www.credencys.com/blog/whats-new-in-angular-8-features/
[5]
https://www.angularminds.com/blog/top-10-features-of-angular-8
[6]
https://www.tutorialspoint.com/angular8/angular8_routing_and_navigation.htm
[7]
https://www.starkflow.co/blog/new-features-and-updates-in-angular-8
[8]
https://stackoverflow.com/questions/68981020/angular-8-this-router-navigate-changes-url-but-not-rendering-to-next-page
[9]
https://flexiple.com/angular/new-features-and-updates-of-angular-8-0
[10]
https://www.pluralsight.com/blog/software-development/new-features-angular-8
[11]
https://ultimatecourses.com/blog/detecting-route-changes-angular-router
[12]
https://www.turing.com/kb/navigation-and-routing-in-angular-8
[13]
https://angular.io/guide/feature-modules
[14]
https://github.com/anglibs/angular-location-update
[15]
https://update.angular.io
[16]
https://angularindepth.com/posts/1076/whats-new-after-angular-8
[17]
https://angular.io/guide/route-animations
[18]
https://angular.io/tutorial/tour-of-heroes/toh-pt5
[19]
https://angular.io/guide/router
[20]
https://angular.io/guide/router-tutorial